При обычном встраивании видео на сайт, в коде указывается размер фрейма и получается, что при изменении разрешения экрана, на разных устройствах встроенное на сайт видео отображается без учета экрана, как если бы Вы открыли его на самом видео хостинге.
Наша задача сделать так, чтобы при изменении размера страницы фрейм видео автоматически изменял свой размер. При открытии сайта с разных устройств видео будет подстраиваться под размер экрана.
Данное руководство протестировано с сервисом YouTube и приложением MediaCMS.
По умолчанию Вы получаете ссылку вида:
<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>
Чтобы видео подстраивалось автоматически приведем этот код к виду:
<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
Как Вы видите мы убрали фиксированные размеры и добавили 2 css класса: container и video.
Теперь нам нужно добавить эти классы в файле стилей нашего сайта:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Контейнерному элементу задается нулевая высота и процентный нижний отступ. Процентный нижний отступ — это процент от ширины контейнера, поэтому он имеет фиксированное соотношение сторон. Но для того, чтобы iframe отображался внутри контейнера с нулевой высотой, нам нужно сделать контейнер относительным, а iframe абсолютным, расположив его внутри div.
Не забудьте добавить версию в путь вашего css файла, чтобы при новом открытии загрузился актуальный файл стилей, а не кэш версия, сохраненная ранее браузером.
Пример:
<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">
Теперь встроенное Вами видео будет автоматически адаптироваться под размер экрана или размер окна браузера.