X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-03-20
  • 2492 просмотр

    4 комментарий

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

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

Хочу сегодня рассказать об одной маленькой но очень полезной штуке, а именно о том как сделать видео с 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, адаптируется под ширину блока в котором оно находится.

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

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 7, в среднем: 4.9 из 5
Читайте также
Опубликовано 4 комментария

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.