Vulpo One

16:9 iframe

Posted in Development/Web

Пока переделывал видосы заодно немного подправил оформление для вставленного видео. Было какое-то такое безумие, не помню где его взял:

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

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

Теперь намного проще:

.videoblock > .content > iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

css Also in English