Embedding Videos

Fixing a minor annoyance of Tufte CSS

2020-04-21

This is how embedded youtube videos look like by default using Tufte CSS:

Awful YouTube EmbeddigThis is zoomed out at 50%. Tom Scott is a great educational YouTuber from the UK.

Awful YouTube EmbeddigMobile looks completely fine.

If you're on mobile, then it looks fine. However, on desktop, it will be very tall. For some reason, this is the default which I find very annoying. At least it's responsive, I guess, but I just can't stand how tall it looks on desktop. Also apparently margin notes kind of break on mobile when there are iframe tags, but oh well.

It seems like this behaviour isn't a bug. I mean, on the Tufte CSS overview, it shows the YouTube embedding just like how I'm describing. I don't actually like it this way; I would rather it keep the 16:9 aspect ratio as much as possible. So instead, this is what I came up with:

            
<figure>
    <div class="iframe-wrapper">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
</figure>

So what this does is it wraps the iframe in a div element with the iframe-wrapper class instead of a figure. This means that it will keep its 16:9 aspect ratio that is specified in that class. However, since div utilizes the full width of the page, I have to constrain it in a figure tag.

That looks like this:

So much nicer!

Mobile is alrightMobile looks fine, but it's not as good as before. It doesn't seem to reach all the way to the right side.

Better YouTube Embedding

I'm not quite sure why I need a div element, but hey, at least it works better now. However, there was now the issue that on mobile, the figure wasn't reaching all the way to the side. It seemed like it wasn't able to use the full width. I looked into the Tufte CSS code, and I found the reason why it wasn't reaching all the way to the side on mobile:

            
figure {
    max-width: 90%;
}

By design, on small screens it turns out that Tufte CSS will make the image (or more general, figure) only 90% the full width. It doesn't actually center it. So I could have made it 100% (or removed it entirely) but I kind of liked how it looked not quite at full width. So I just added the following to center it.

            
figure {
    max-width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Back