Images aren't the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an <img> and override its height value to auto, the image will naturally retain its aspect ratio. This is also true of <video>, but honestly most video on the web these days embedded on pages directly through the <video> tag.

Case in point, I tried doing that here on the lodge and ultimately gave up since Vimeo Pro was so much more practical (works on any device, nice player, cheap, fast streaming, etc). You don't embed Vimeo videos (typically) through a <video> tag, you use their provided embed code, which is an <iframe>. YouTube and number of other of the more popular video services use this too.

iframe do not keep their aspect ratio when resizing like images do. However, we can figure out what the aspect ratio is originally by testing it's width and height and diving. The we can use that information to create a box with that exact aspect ratio (using a padding trick, see Uncle Dave's Ol' Padded Box) and absolutely position the iframe within it. See: Intrinsic Ratios for Videos. That way when we resize wider and narrower, the video essentially behaves just like an image, respecting its apsect ratio.

Or, we could just use FitVids.js (which I helped write) to automate this entire process (it literally does just what I described, only automatically). We include this library in our global.js in the same concatenating way we did with prism.js. For the first time we need jQuery, so we snag that link from ScriptSrc and link it up in the footer before our global.js. Then in our global.js we call FitVids. Done and done.

Comments

  1. JoeShmoe
    Permalink to comment#

    “works on any device, nice player, cheap, fast streaming, etc.”

    Actually it worked on my Android device no problem all along, ’till you went to Vimeo, now it’s complaining that I need to use a “browser that provides native H.264 support or install Flash”, I tried with 4 different browsers (including Android Stock). Just FYI I have a Motorola Photon with Android 2.3.4…

    Otherwise, I’m really enjoying all the videos, thanx a million!!!

    • Chris Coyier
      Permalink to comment#

      Interesting. I’ll have to do some more Android testing. I can’t imagine Vimeo just decided to not support Android… Maybe it’s something I can change or something else going on.

      I’m going to bury this comment since it’s kind of a specific temporary technical issue.

    • marinade
      Permalink to comment#

      I have the same phone and it doesn’t let me play vimeo ever and before I used to be able to play youtube videos just by clicking on the url (ie. when someone shares a youtube link on facebook) but now I have to play them strictly through the youtube app or they won’t play. I am thinking the problem is just with this phone?

  2. Eduard
    Permalink to comment#

    hey Chris, I have a question for you, I’ve try do follow you along those videos, and working on my local host using MAMP but the free edition. The thing is if in my global.js i will import the FitVids.js, when I inspect things in console nothing happen. I have a youtube video embed using . If i copy and paste the the js code to make the video be responsive in to the console like this

     $(article).fitVids();

    the console returns me $(article).fitVids(); this is not a function. I did check if my Jquery library is imported and it’s on top, and it’s there.

    The wired thing is if i don’t use codekit to tell my global.js file to import the FitVids.js, but rather I will do manually in my footer.php after the jQuery library is imported from google, it works, only if i paste the code again in the console.

    Do you have any idea if it’s because I didn’t set up a local url, like you did? and instead of that I’m using localhost:8888/static/?

    Thank you so much.

    • JoeShmoe
      Permalink to comment#

      Try using $(‘article’).fitVids();

      You’re missing the quotes surrounding the word article…

    • Eduard
      Permalink to comment#

      I’ve try that no change at all. I have the same exact code as Chris has in his video, on his end it works on mine it don’t. I spent 4 hours on this and I still have the problem.

    • Sino
      Permalink to comment#

      For future people who have this problem… I spent a solid 30 minutes trying to figure out why the console was logging “Uncaught TypeError: undefined is not a function”. Ultimately i was calling the function as

      $("article").fitvids();
      

      which is missing a capital letter. =( It is always the small things that cause the problems riight? haha

  3. Seth Hall
    Permalink to comment#

    @Eduard

    Try a class or an ID

  4. Josh Betz
    Permalink to comment#

    Did you ever figure out what was causing the black bars? I’m having a similar problem. For some reason fitVids is calculating the padding at 75% instead of 62.5% for a 16:10 video.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.