<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" Different Size = width= "560" height="315" 560 by 315 640 by 360 853 by 480 1280 by 720 --> <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>⁵</a> </p> </div><!--./row --> </div><!--./container -->