Skip to main content


16:9 iframe


While updating YouTube embeds today, I also updated embed styling. I used this insanity taken from I don’t even remember where:

.videoblock > .content {
overflow: hidden;
padding-top: 56.25%;
position: relative;

> iframe {
border: 0;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
}

Much simpler now:

.videoblock > .content > iframe {
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
}
https://vulpo.one/posts/iframe-16-9.html