I tried to find a good solution on the bootstrap site but I didn't get an answer to this yet. I think I can't be the only one struggling with this, but I couldn't find anything that helped me.
I'm trying to embed an mp4-video on my website. The problem is, that if I use an iframe-tag I can't use autoplay and loop. Because of that I would like to solve it with a video tag (or something else that supports autoplay and loop). After that I tried to make my video responsive with an object-tag but this didn't work. Even though I let it in my code (to show you) which you can see below:
<div align="center">
<object class="embed-responsive-item">
<video autoplay loop >
<source src="file.mp4" />
</video>
</object>
</div>
I hope anyone of you can help me fix this.
This question is related to
twitter-bootstrap
video
twitter-bootstrap-3
responsive-design
mp4
Simply add class="img-responsive" to the video tag. I'm doing this on a current project, and it works. It doesn't need to be wrapped in anything.
<video class="img-responsive" src="file.mp4" autoplay loop/>
using that code wil give you a responsive video player with full control
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="640" height="480" src="https://www.youtube-nocookie.com/embed/Lw_e0vF1IB4" frameborder="0" allowfullscreen></iframe>
</div>
Tip for MULTIPLE VIDEOS on a page: I recently solved an issue with no mp4 playback in Chrome or Firefox (played fine in IE) in a page with 16 videos in modals (bootstrap 3) after discovering the frame rates of all the videos must be identical. I had 6 videos at 25fps and 12 at 29.97fps... after rendering all to 25fps versions, everything runs smooth across all browsers.
This worked for me:
<video src="file.mp4" controls style="max-width:100%; height:auto"></video>
Source: Stackoverflow.com