"YouTube/Vimeo Responsive Embeds updated"
Bootstrap 3.2.0 Snippet by mrmccormack

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Reference http://getbootstrap.com/components/#responsive-embed NEW: "As seen in SUIT CSS, we've added a few classes for creating responsive embeds. They're great for proportionally scaling down YouTube videos and other iframe or embed elements" --> <div class="container"> <div class="row"> <h3> Mr. M.'s YouTube/Vimeo Responsive Embeds - Bootstrap 3.2 </h3> <p> <a href="http://bootsnipp.com/iframe/d2DzN" target="_blank">View Full Screen </a> <i>(Req'd to test on mobile device)</i> </p> <hr> </div><!--.row --> </div><!--./container --> <div class="container"> <div class="row"> <div class="col-md-4"> <h4> Examples of Responsive Embeds, NEW to Bootstrap 3.2 </h4> <p><strong>This UPDATES my <a href="http://bootsnipp.com/snippets/featured/responsive-youtube-player" target="_blank">previous Bootsnipp example using custom CSS</a>, for Bootstrap 3.1.0.</strong> </p> <p> You don't need to include <code>frameborder="0"</code> in your <code>iframe</code>s as Bootstrap 3.2 override that for you. </p> </div><!--.col --> <div class="col-md-8"> <h3> Responsive 16:9 YouTube </h3> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe> </div> <h3> Non-Responsive 16:9 YouTube </h3> <div> <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" width="630" height="354"></iframe> </div> <h3> Responsive 4:3 YouTube </h3> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/TQl_Sv3LztQ"></iframe> </div> <h3> Non-Responsive 4:3 YouTube </h3> <div> <iframe width="420" height="315" src="//www.youtube.com/embed/TQl_Sv3LztQ"></iframe> </div> <hr> <h3> Responsive 16:9 Vimeo </h3> <div class="embed-responsive embed-responsive-16by9"> <iframe src="//player.vimeo.com/video/22428395"></iframe> </div> </div><!--.col --> <!-- Validation --> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fd2DzN" target="_blank"><small>HTML</small><sup>5</sup></a> </p> </div><!--./row --> </div><!--./container -->

Related: See More


Questions / Comments:

<div class="embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" src="https://www.youtube.com/emb..." frameborder="0" allowfullscreen=""></iframe>
</div>

awariat () - 8 years ago - Reply 0


Hello, in Chrome it's working fine, but not in Mazilla =( Do I need to write some additional code?

Lily () - 9 years ago - Reply 0


What version of Mozilla? What Operating System? thanks for comment. Rob

mrmccormack () - 9 years ago - Reply 0


There is no difference in the behavior, but this one has no CSS, since the necessary code is NOW built into Bootstrap 3.2. Have a look at the old one, the extra CSS is there. Hope that answers your question. Thanks for asking.

mrmccormack () - 9 years ago - Reply 0


Hi Thanks for the post. However, I don't really see the difference. Please explain.

KDigitL () - 9 years ago - Reply 0