Attach to Process

Updated: 4/26/2021

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 write.as sites. To make the YouTube videos I embed on write.as sites responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I added to my journal.

Custom CSS

I added the following Custom CSS:

/* 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 #HTML #CSS #WriteAs

Discuss... or leave a comment below.