How to Embed Responsive YouTube Videos on Write.as

Coney complained to me this morning that the Youtube videos on my latest music log entry were getting cut off when viewed from her phone. I've known about this issue for awhile but didn't really try to find a solution for it. Well, today I did and it turns out to be really easy.

The issue stems from the fact that I have to use iframes to embed videos on this site. To make the Youtube videos I embed on this Write.as site responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I made for this site.

Custom CSS

I added the following to the Custom CSS for this site:

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

HTML Changes

And on my posts where I embedded Youtube videos, I simply wrapped the iframe element with a div element that had a class attribute value of “video-container”, like this:

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

With those changes in place, I have found that the Youtube videos I embedded on my posts will shrink down to match the size of the screen on a mobile phone, or will expand to match the width of the text on a post when viewed on a desktop browser. Pretty cool.

Tags: #HowTo #WebDevelopment #WriteAs