HTML Video Tags The video tag in HTML luckily makes creating responsive video incredibly easy. All you need to do is set the width to 100% and the height to auto.
Bootstrap also provides a few modifier classes to adjust the aspect ratio of the elements: embed-responsive-16by9. embed-responsive-21by9.
It is to my understanding that you want to embed a video on your site that:
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>
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/>
This worked for me:
<video src="file.mp4" controls style="max-width:100%; height:auto"></video>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With