Responsive Video Embeds

Responsive video is easy when you are using HTML5 video. All you have to do is target the video tag and apply the following styles to your css:

video {max-width: 100%; height: auto}

And voila! You now have responsive video! This method works on the following browsers: Chrome, Safari, Firefox, IE9, and Opera. It’s also been tested on iPhones and iPads.

If you need support for IE7 & IE8 then you will need to use something like video.js (with flash fall back ofcourse), but that’s another tutorial on its own. As you can see we failed to mentioned support for IE6… -__- yea that’s because we don’t support IE6 and shame on you if you are still using it or catering to it. Actually… IE6 should go play in traffic or better yet, jump off a tall building or better yet, die in a slow slow fire… sorry, but I just don’t like IE6.

Let’s talk about something more awesome like how to get 3rd party responsive video embeds (YouTube/ Vimeo). Don’t try applying the same method we discussed earlier to iframe, object, or embed, because it doesn’t work. Sure, you can set the width:100% but the height will stay the same and that will break the aspect ratio.

In our journey to find the best method to use, we came across FitVids. It was perfect and got the job done, but as web developers we are always looking for more efficient ways to do things.

That is how we came across a more simple method which only used CSS, unlike FitVids which loads 2 javascript files and css.

Elastic Objects & Iframe Embedded Videos.

You can see it in action here.

All you have to do is is wrap the embed code with a container and padding bottom to the css. Then add 100% width and height with absolute position to the child element. Doing this will make the embed elements expand full width automatically. The CSS code is below:

        
        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;
        }
        .video-wrapper iframe,  
        .video-wrapper object,  
        .video-wrapper embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
	

 
<div class="video-wrapper">
	      <iframe width="560" height="315" src="http://www.youtube.com/embed/9bZkp7q19f0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

This awesome information was found on: Web Designer Wall