Адаптивное видео с youtube
интегрируем видео с Youtube в адаптивную верстку
![Photo by Sam McGhee on Unsplash](/img/2020/04/main_220420200520.jpg)
Проблема использования видео с YouTube на адаптивных сайтах заключается в том, что нужно интегрировать блок iframe
, который должен иметь строго определенные параметры соотношения сторон высоты и ширины, в противном случае качество изображения будет весьма сомнительным.
Приступим к реализации.
Для начала нам нужно создать блок-обертку:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/klZNNUz4wPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Затем добавим CSS:
.video-container {
overflow: hidden;
position: relative;
width:100%;
}
.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Магическое число 56,25%
определяет соотношение сторон изображения 16:9. Если видео записано в формате 4:3, цифра должна равняться 75%
.
Подробнее о используемом приеме можно прочитать в статье “Пропорции для img”.
Спасибо за внимание.
Написано по материалам статьи “Responsive YouTube Video Embeds”.