[ad_1]
https://i.ytimg.com/vi/oAPdNKTrBYA/hqdefault.jpg
Responsive Video Embeds with Bootstrap 3
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to iframe, embed, and object elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip! You don’t need to include frameborder=”0″ in your frames as we override that for you.
Mohit Manuja
Original source
22 responses to “Responsive Video Embeds with Bootstrap 3”
plz small video 3-4 minte
and big video very high
sir plugin name pls and how to install it dw cc 2015?
good knowladge
Thank you Mohit for sharing with us!!!!! Real good video. Learned a lot today.
Thank you, this video really helped me with my university's project
<div class="col-md-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/oAPdNKTrBYA" allowfullscreen></iframe>
</div>
</div>
it says file not found ? plz reply.
Sir can we add playlist…
so that the videos will be played one after another…?
This Video is Awesome! Thank you : D
Enjoyed your rendition and TEACHING … well done!
tnx a lot.. Can I set width and height for a certain video size? Please respond.. badly need your help.. tnx a lot..
how can i set it as the background for my page?
Easily understandable and well shown. Thank you Mohit
Thank you sir. I am a beginner it's really cool.
When i remove hidden-xs it shows.
<div class="container">
<div class="panel panel-warning">
<div class="panel-heading">
<p class="panel-title">Responsive video embed 16/9</p>
</div><!– End panel-heading –>
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9 hidden-xs">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/oAPdNKTrBYA" allowfullscreen>
</iframe>
</div><!– End embed-responsive –>
<p class="visible-xs hidden-xs">The video has benn removed for extra small size of your browser, so please move on to bigger screen size to view it.</p>
</div><!– End panel-body –>
</div><!– End panel –>
</div><!– End Container –>
Hi, a very good video thank you. I have a little problem.
I did all the code which worked correctly but wanted to embed several videos in a grid. I installed the code in a col-xs-3, four of which were installed in the same row, but it did not work. Vanished OK at XS but video itself dos not scale in the col-xs-3 at any screen size.
Any ideas?
Thanks brother 🙂
Thanks, gave me a little more insight into the working of Bootstrap 3. The video was concise, clear and to the point. Thanks again
Cool!
awesome Mohit! 😉
Great video. Worked perfect!
Excellent Mohit, and rather simple. Where can I find more of your useful videos?