We quickly realized when adding a video from YouTube to one of my blog posts about How To Batch Edit In Photoshop that it was not responsive on my mobile phone even though my theme is responsive. Since this website is fully “responsive”, We needed the YouTube video to re-size depending on the browser size or device width. When We added the embed code, the video had a fixed height and width. THIS IS NOT A GOOD THING!! This looked fine on desktop computers, but pretty much broke the design when viewing on a mobile device. We needed a responsive YouTube video embed code. You would think that videos that have 100% width set would automatically just resize to the surrounding container. Well, that is just not the case unfortunately.

The fix was actually quite simple, and here is how.

You will need to wrap the responsive YouTube video embed code with a <div> and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. You will also want your embeded video to be centered on your mobile devices. This will force the embed elements to expand full-width automatically. Awesome! Exactly what we need.

First you will need to add the following to your custom style sheet.

CSS

/* Youtube Reflexive */
.vid-container {
    position: relative;
    padding-bottom: 50%;
    padding-top: 35px; height: 0; overflow: hidden;
}

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

Next, edit add some HTML around your embed code.

HTML

<div class="vid-container">
         <iframe width="xxx" height="xxx" src="http://www.youtube.com/embed/(EMBED CODE)" frameborder="0"></iframe>
</div>

If the responsive YouTube video embed worked, your videos should be responsive and ready to view on Tablets and Mobile devices.

 

Responsive YouTube Example COMING SOON