How to enable Responsive Youtube Video Embeds using Bootstrap

Adding videos to your responsive website can cause many issues with how the site responds to different screen sizes. iframes are by default a fixed size. By adding bootstrap embeded class,you can make your video responsive.


The first thing that you need is the YouTube iframe embed code, grab that in your video share options from the YouTube site.




 Place the iframe code on your page inside the div tag with class ".embed-responsive embed-responsive-16by9" for 16:9 aspect ratio and ".embed-responsive embed-responsive-4by3" for 4:3 aspect ratio


 <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="//www.youtube.com/embed/o9kr9ZhydK0" frameborder="0" allowfullscreen></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="//www.youtube.com/embed/o9kr9ZhydK0" frameborder="0" allowfullscreen></iframe>
</div>


All done. Now check YouTube video in tablet/mobile device