Skip to main content

Responsive iFrame

Today I needed to embed a YouTube video within the body of a responsive design. This is usually fairly easy with images, but iFrames need a bit of extra love to make them work. I Googled for a while and came across this link: http://stackoverflow.com/a/12121929.

I didn't want to use an image, so I followed the comments and came up with the following code.

  1. <div style="width:100%;padding-top:75.4%; position:relative;">
  2. 	<iframe allowfullscreen="" frameborder="0" src="//<a href="http://www.youtube.com/embed/qzK3WqeCbpM&quot">www.youtube.com/embed/qzK3WqeCbpM&quot</a>; style="position:absolute;width:100%;height:100%;top:0;left:0;"></iframe>
  3. </div>


Comments