Now Booking Projects for April-May 2019

Better Responsive Video Embeds

Responsive videos are, at times, tricky. Especially when you’re trying to embed a video from YouTube or Vimeo. You see, by default, YouTube videos “respond” by shrinking their width but keeping their height. Ultimately, this results in cropping the video down to a weird square.

Try resizing your browser. See how the video crops?

When you play the video, the inside will resize to the correct aspect ratio, so you have a lot of extra black space at the top and the bottom. Like when you were watching a “wide screen” movie on a square CRT TV in like, 2001.

Wide Screen Flashbacks

This approach is perfectly functional. It doesn’t really inhibit the user from playing the video. It’s just butt-ugly. So for years, designers and developers have been coming up with better responsive video solutions.

Basic Responsive Video Embeds

The standard way to embed a video responsively is to put it some kind of container or wrapper that has a fixed aspect ratio (usually 16:9) and then absolutely position the video within the container, so it takes up all of the available space.

There are scripts, like FitVids, which use JavaScript to wrap embedded videos in a fluid-width container. Since it automatically detects where the videos are and inserts the video container, it requires no extra work on the user’s part.

But adding extra JavaScript to your website can slow it down. So, often times developers just include their own responsive video CSS and make sure that all added videos get wrapped in a special container so they respond properly.

This will resize the video on mobile, making sure it maintains it’s 16:9 aspect ratio and doesn’t crop into a weird square:

Whoo, no squares here!

And it really does look nice. On phones, you get a clean normal-looking video player, without the “wide screen” effect:

With very little CSS, you too can have videos that look normal on all screen sizes!

But it can be better.

The only problem with this method (well, besides manually requiring you to put each video in a wrapper) is that it doesn’t allow you to restrict the video’s width. The video is always going to be 100% of the parent container.

Which is fine, if that’s what you want. But once you get into large, full-width layouts, having a video that takes up the full screen might not be desirable.

For example – if your content area is 1200px wide, and you use this method, your video is going to be 675px tall. That’s a lot of screen real estate taken up by a video. It also looks a little wonky:

That’s a big video.

The obvious fix would be to restrict the .video-wrap container to a maximum width. Change the line max-width: 100%; to something smaller, say 700px. Easy fix, right?

Err… not exactly:

Oops… more squares.

You see, in CSS, percentage-based padding is based on the parent container. And, confusingly, the top and bottom percentages are based on the parent container’s width.

So, the padding-bottom: 56.25%; on the .video-wrap is actually calculating 56.25% of the .video-wrap‘s parent, which happens to be a 1200px content area. When restricting the width to 700px, the padding is still based off 1200px, and the entire thing gets weird.

There are ways around this. You could do a double video wrap, essentially wrapping your video in two containers: one with a fixed with, and one that makes it responsive. But that adds extra markup to your page and is going to be hard to remember.

Instead, you can do it all with CSS using the :before pseudo element. First, set the .video-wrap‘s maximum width (I added some styles here to center the video on the page).