Responsive Video

Most of us love to watch videos online. Many of us embed videos in our product websites, our blogs, Facebook posts, Google+ posts and wherever else. Yet we don’t know which device these videos will be viewed on. Will someone open up our video 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 is broken on phones and tablets. Here is an example, try to shrink your browser width smaller then this video below and you'll see how this video is displayed on a smaller screen.

Old and Busted

Wouldn't it be nice if there was a way to make them scale with minimal effort? There is! Take a look at the same video below.

New Hotness

The issue of now knowing which device will be used to consume information on your site is a big one. There are thousands of devices out there, how can you possibly create something that works and looks nice on all of them?

This is why we created Foundation — a flexible framework for building prototypes and production code for any kind of device (even future devices which will come out in the future). The example above uses Foundation to take care of scaling the height and width of the video to the appropriate size of the device it is being viewed on. 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="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
</div>

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

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

Pretty nifty, huh? If you'd like to learn more and dig around the code to do this then hop over to the UI section on Foundation site.