Vulpo One

Tag: css

16:9 iframe

Posted in Development/Web

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;
}

Comments

css Also in Russian