57

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.

neophyte
  • 6,143
  • 2
  • 22
  • 42
BRsmover
  • 827
  • 2
  • 9
  • 20

5 Answers5

126

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. 

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>
</div>
donkey
  • 1,300
  • 13
  • 28
Schybo
  • 1,613
  • 1
  • 12
  • 12
  • That's exactly what I was looking for! Thank you very much! This really helped me! – BRsmover Sep 25 '14 at 14:25
  • 1
    Tested on ie9 and safari. Both work perfectly so you have something else going on there. Regarding ie8 - it [doesn't support](http://caniuse.com/#feat=video) the – Schybo Jul 15 '15 at 12:56
  • This covers the whole page and is responsive but i want small height & width. how do i do that?? – J4GD33P 51NGH Jul 06 '18 at 08:17
  • @J4GD33P51NGH Just change the `max-height` and `max-width` of the parent div of the video. See an [demo here](http://jsfiddle.net/0k3wLqvb/). – Schybo Jul 19 '18 at 14:01
16

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/>
Allan Clayton
  • 237
  • 3
  • 9
5

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>
Reeno
  • 5,524
  • 10
  • 35
  • 48
Zama Sparlay
  • 77
  • 1
  • 1
5

This worked for me:

<video src="file.mp4" controls style="max-width:100%; height:auto"></video>

Hein van Dyke
  • 428
  • 6
  • 9
0

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.

T Gorle
  • 1