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:
This is zoomed out at 50%. Tom Scott is a great educational YouTuber from the UK.
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:
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;
}