Дизайн та розробка сайту

Как сделать адаптивное видео YouTube на сайте

Как сделать адаптивное видео YouTube на сайте

Доброго времени суток. 🙂

Хочу сегодня рассказать об одной маленькой но очень полезной штуке, а именно о том как сделать видео с YouTube на вашем сайте адаптивным. Если вы ведете свой сайт и сталкивались с тем что нужно разместить на сайте виде с сервиса YouTube, то скорее всего вы задались вопросом, как сделать его адаптивным, потому как на мобильных устройствах вставленное видео не уменьшается и начинает ломать верстку и выходить за границы отображения.

Как сделать адаптивное видео YouTube на сайте

Если вы размещали код YouTube у себя на сайте то заметили что видео выводится с помощью тега iframe. Обычно код видео имеет примерно такой вид:

<iframe width="560" height="315" src="https://www.youtube.com/embed/TdRllKvKi9k" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Даже по коду видно что по-умолчанию для видео уже заданы размеры плеера. Изначально размеры такие - 560 пикселей ширина и 315 пикселей высота. На большом экране и при нормальной ширине вашего сайта, такой размер вполне допустимый, но если ширина экрана устройства 420 пикселей? Результат - плеер вылазит за границы видимой части и сайт выглядит криво и неправильно. Как же решить данную задачу?

Не раз я встречал простейшее решение. когда убирали с кода iframe значения размеров, а потом просто через стили CSS задавать размеры плеера для определенных разрешений. Вариант допустимый, но трудозатратный и не всегда ровно отображающийся на сайте. Тем неимение, вполне рабочий.

Я предлагаю более простой, как по мне, способ. При его использовании плеер будет четко подстраиваться под размер окна браузера и корректно отображаться при любом разрешении. Давайте посмотрим, как это осуществить.

Для начала. вам нужно будет разместить код внутри блока. Также блоку присвоим любой класс, например - frame_blc.

<div class="frame_blc">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe>
</div>

Теперь, нужно добавить универсальные стили, которые и будут адаптировать размер плеера YouTube.

.frame_blc{
  overflow:hidden;
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
}
.frame_blc iframe {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

По сути мы делаем адаптивным наш родительский блок, а сам плеер делаем с абсолютным позиционированием и растягиваем на всю ширину и высоту относительно родителя. Для блока основным параметром, на который следует обратить внимание, является - padding-bottom:56.25%. Он задает высоту родительского блока для плеера у которого видеоролик имеет соотношения сторон 16:9. Если Ваш видеоролик имеет соотношения 4:3, то параметр будет - padding-bottom:75%.

После проделанной работы, вы можете проверить результат. Теперь видео с YouTube, адаптируется под ширину блока в котором оно находится.

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top