Адаптивная вставка видео на сайт

16 декабря 2020

Вставить код видео на сайт, чтобы оно не вылазило за пределы экрана при любом разрешении, можно так

Задайте стиль

.video-block {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-block iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

И положите код видео в блок с классом .video-block , чтобы получилось типа такого

<div class="video-block">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/qk-Jbvlr-yo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

Как видите, ничего сложного