Responsive YouTube Embeds

2014-07-23

The responsive nature of the modern web is making content integration tricky - especially in the age of video. Working with Youtube videos typically involves <iframe> embeds, which don’t give you a ton of freedom due to Cross Origin Issues unless you use the Youtube API. The API can be a bit cumbersome for a simple, single video though.

Making these videos respond to your screen size can be an issue largely because your iframe has to be malleable and responsive, but that doesn’t mean your content within the <iframe> can be responsive. So, the responsive video turns into a hack. Albiet, a very reliable and useful one!

CSS

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width:100%;
}
.video iframe {
  position: absolute;
  width:100%;
  height:100%;
}

HTML

<div class="video">
<iframe src="..." frameborder="0" allowfullscreen></iframe>
</div>

This trick is possible because of the extra padding set to the .video div, which is at a percentage of its size and will therefore scale if the .video div changes in width. The <iframe> then scales with it and subsequently, the video itself.

This of course is relying on your video to be at the standard 16:9 screen ratio (notice 9 divided by 16 is .5625) - hence 56.25% in the padding. Other videos will need other padding percentages to fit their ratio.