Responsive Iframe / youtube videos embed with Bootstrap

Hi guys, today we will see how to make iframe videos responsive using bootstrap framework.

Since the embed code for a youtube video is a iframe code, this is work for youtube videos too.

Have a look at this bootstrap link

http://getbootstrap.com/components/#responsive-embed

all you got to do is wrap your iframe code in a embed-responsive like shown below

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Leave a Reply

Your email address will not be published.