Tech
Infected

Linux, OpenSource, Programming And Hacks

Jun 7, 2017

Responsive Iframe / youtube videos embed with Bootstrap

Jun 7, 2017
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>






No comments:

Post a Comment