In this video and blog post, I am going to show you a simple way to make all your videos responsive regardless of the size of the video or the size of the window that the blog is being displayed in.

The video in this blog post has the same principle applied to it, you can try shrinking and expanding the window to see how the video container responds.

In order to make your videos responsive, you’ll need to add this css code to your blog somehow. Some themes have a special box for adding custom CSS, like in this video. For other themes, you may have to edit the file directly, such as the style.css file for the theme, and paste in and save this code.


.video-container
{
position: relative; /* keeps the aspect ratio */
padding-bottom: 56.25%; /* fine tunes the video positioning */
padding-top: 60px;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}

once the above CSS code is available in the blog, you can just grab your youtube iframe and create a div around it with class name of ‘video-container’ thusly:

<div class=”video-container”><iframe src=”whatever the youtube video is” width=”640″ height=”480″></iframe></div>

Follow these instructions and all your videos will be fully responsive on your blog!

Thanks for watching,

Hugh Dec 9, 2013