Responsive Video Embeds On All Devices

Ever notice that when you shrink your browser width an embedded video doesn't always shrink with it? Or that the same video doesn't scale quite right on a mobile or tablet? We noticed the same thing when we rebuilt and launched a newer, much sexier ZURBlog this year. We wanted the blog to be 100% responsive, meaning it had to look sexy on any device. Figuring out how to properly scale video embeds was one of the hurdles we overcame.

Videos That Break Down

The problem is that we don't know which device the video embeds will be viewed on. Will someone open up our videos on a phone? On a tablet? On a laptop? We have no control on how people are going to consume our videos.

The standard embed works nice for desktops, but breaks down on phones and tablets. Here is an example: try to shrink your browser width smaller then this video below and you'll see how it's displayed on a smaller screen.

Making Videos Look Awesome On All Devices

Since the blog was built on Foundation, we wanted a pure CSS solution to this problem. The Javascript solution is a bit more complex for folks who are trying to use Foundation. That's because a number of initializations must be fired at a specific time. Using CSS is much simpler. Check this out — try to shrink the browser and watch the video below:

The major issue with scaling is to ensure you keep the ratio of width to height constant and adjust the height appropriately. The code to embed a responsive video on your site is dead simple if you're using Foundation, here it is:

<div class="flex-video">
	<iframe width="420" height="315" src="https://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
</div>

<div class="flex-video widescreen">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe>
</div>

<div class="flex-video widescreen vimeo">
	<iframe src="https://player.vimeo.com/video/21762736?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

That's all! You dont need to worry about how videos are displayed on any device anymore. You can read the full documentation about this feature on the Foundation site and, of course, dig through the code to see how it's implemented. Enjoy!