Bootstrap 3 - Responsive mp4-video

Question

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    lt div align  center  gt      lt object class  embed-responsive-item  gt        lt video autoplay loop  gt          lt source src  file mp4    gt        lt  video gt      lt  object gt    lt  div gt    I hope anyone of you can help me fix this

User · Answer

This worked for me    lt video src  file mp4  controls style  max-width 100   height auto  gt  lt  video gt

User · Answer

It is to my understanding that you want to embed a video on your site that    Is responsive  Allows both autoplay and loop Uses Bootstrap    This Demo Here does just that  You have to place another embed class outside of the object embed iframe tag as per the the instructions here - but you re also able to use a video tag instead of the object tag even though it s not specified     lt div align  center  class  embed-responsive embed-responsive-16by9  gt       lt video autoplay loop class  embed-responsive-item  gt           lt source src  http   techslides com demos sample-videos small mp4  type  video mp4  gt       lt  video gt   lt  div gt

User · Answer

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

User · Answer

using that code wil give you a responsive video player with full control   lt div class  embed-responsive embed-responsive-16by9  gt       lt iframe class  embed-responsive-item  width  640  height  480  src  https   www youtube-nocookie com embed Lw e0vF1IB4  frameborder  0  allowfullscreen gt  lt  iframe gt   lt  div gt

User · Answer

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    lt video class  img-responsive  src  file mp4  autoplay loop  gt

[twitter-bootstrap] Bootstrap 3 - Responsive mp4-video

Examples related to twitter-bootstrap

Examples related to video

Examples related to twitter-bootstrap-3

Examples related to responsive-design

Examples related to mp4