Update: SproutVideo supports responsive video embed codes out-of-the-box. Now, you can ensure your videos will resize automatically without touching a line of code on the page.

If you’re in the process of building a responsive website or looking to add video to an already responsive website, here is a quick guide on how to make sure your videos resize as seamlessly as the rest of your site.

The Problem

Why do images resize fluidly and maintain their aspect ratio in responsive layouts, while videos using iframe or object embed codes do not? Since images have a defined width and height, browsers are able to calculate, and maintain, their aspect ratio when resizing them.

Iframe and object elements, on the other hand, have no native width and height that a browser can use to calculate an aspect ratio. This can lead to some frustrating behavior when embedding a video in a responsive layout.

The Solution: Intrinsic Aspect Ratios

The solution to this problem is to tell the browser what the proper aspect ratio should be for the video in the iframe or object element. This way, the browser will be able to maintain that aspect ratio when resizing the video in a responsive layout.

How it works

To set up this “intrinsic ratio” you simply need to create a box with the proper aspect ratio, place the embedded video in that box, and have it stretch to fit that box.

The padding-bottom css property is what allows us to define the aspect ratio for the box in which the video will be placed. By setting the padding-bottom property to a percentage of the width of the containing element, we are able to create an intrinsic aspect ratio for that box.

Once the aspect ratio is set up, we just need to set our video embed code to take up the full width and height of the box we just created.

An example

<style>
	.videoWrapper {
	    position: relative;
	    padding-bottom: 56.25%;
	    height: 0;
	}

	.videoWrapper iframe,
	.videoWrapper embed,
	.videoWrapper object {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	}
</style>
<div class="videoWrapper">
	<iframe class='sproutvideo-player' type='text/html' src='http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=sd' width='630' height='354' frameborder='0'></iframe>
</div>

See it in action (Try resizing the browser window!)

Explanation

In this example, the .videoWrapper sets the padding-bottom property to 56.25%. This sets up a 16:9 aspect ratio for that div (9/16 = 56.25%). Then, the SproutVideo iframe embed code is placed within this box and set up to take 100% of it’s width and 100% of it’s height.

Tips

  • You can use different padding-bottom percentages if your video has a different aspect ratio. Set it to 75% if the video is 4:3, for instance.
  • If you need some extra room for a player’s controls (like YouTube for instance), you can add a padding-top property to the .videoWrapper class. YouTube’s player chrome is 25px tall so the padding-top should be set to 25px.
  • If all of this is too much work, you can use a great jQuery plugin called FitVid.js to take care of automatically wrapping your videos in a responsive container with an intrinsic aspect ratio and adding the needed CSS. If you’re using FitVid.js with SproutVideo, make sure to add the following custom selector when initializing the plugin:
$("#thing-with-videos").fitVids({
    customSelector: "iframe[src*='videos.sproutvideo.com']"});

Are you using a SproutVideo video in a responsive layout? Leave us URL in the comments. We’d love to see it!