April 15th 2013 by Etienne in code

Responsive videos

Responsive videos can be somewhat a pain to deal with and too often they’re left alone, breaking pages and killing mobile users experience.

FitVids.js from Chris Coyier and Paravel does a pretty good job, but what if I told you one can easily resize a Vimeo/YouTube video and keep its ratio without any JavaScript?

Use case

Using the share code (as is) of a 830x467 Vimeo video and a 853x480 YouTube video.

Here’s without even trying

<iframe width="830" height="467" src="http://player.vimeo.com/video/61969446?title=0&amp;byline=0&amp;portrait=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe width="853" height="480" src="http://www.youtube.com/embed/mSfXRb4W-R0?rel=0" frameborder="0" allowfullscreen></iframe>

Their width is wider than the wrapper, it adds an horizontal scrollbar and they’re obviously not resizing.

Let’s try something

<iframe width="830" height="467" class="responsive-video-iframe responsive-video-iframe-vimeo" src="http://player.vimeo.com/video/61969446?title=0&amp;byline=0&amp;portrait=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe width="853" height="480" class="responsive-video-iframe responsive-video-iframe-youtube" src="http://www.youtube.com/embed/mSfXRb4W-R0?rel=0" frameborder="0" allowfullscreen></iframe>

.responsive-video-iframe { width: 100%; }
.responsive-video-iframe-vimeo { max-width: 830px; }
.responsive-video-iframe-youtube { max-width: 853px; }

This is definitely an upgrade. Both Vimeo and YouTube are nice enough to resize the video inside the iframe, but the iframes themselves are still not resizing and we’re left with huge black zones as the videos get smaller.

The solution

We’re gonna need two more <div> (It will not make your website any less performant…)

<div class="responsive-video-div responsive-video-vimeo">
  <div>
    <iframe width="830" height="467" src="http://player.vimeo.com/video/61969446?title=0&amp;byline=0&amp;portrait=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  </div>
</div>

<div class="responsive-video-div responsive-video-youtube">
  <div>
    <iframe width="853" height="480" src="http://www.youtube.com/embed/mSfXRb4W-R0?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

.responsive-video-div > div { position: relative; }
.responsive-video-div iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.responsive-video-vimeo { max-width: 830px; }
.responsive-video-vimeo > div { padding-top: 56.26506%; /* 467 ÷ 830 */ }

.responsive-video-youtube { max-width: 853px; }
.responsive-video-youtube > div { padding-top: 56.271981%; /* 480 ÷ 853 */ }

That’s it

No JavaScript, only CSS and a bunch of happy mobile users! \O/

*Edit*

Once again, I did some research after writing this post and found this nice article by Todd Motto which basically has the same solution. Only he’s calculating the video ratio in JavaScript. Quite useful when dealing with unknown user generated content. It’s a clean, minimalistic and library independent alternative, the kind of script I would’ve coded. Give it a look!

Git Tip: Rebase Your Stash

Rebase Your Git Stash Instead Of Merging It

Modular DOMReady

Unmess Your JavaScript Events (Take 2)

 Back to all posts