ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивные блоки для видео на YouTube

Адаптивные блоки для видео на YouTube

Наша задача состоит в том, это как сделать адаптивное видео ролики от YouTube для сайта, что в этой статье подробно разберем, как все делается. Все видео ролики от YouTube устанавливаются через iframe, но здесь идет не корректно по высоте, так как не адаптивен. И задаем width="100%", то после всего каркас плеера растягивается по всей ширине родителя, где автоматически подстраивается под ширину блока при установки.

Если говорить про высоту, то здесь такого функционала нет, хоть выставим hight="100%" где не получится и не будет работать, как ранее сделали с шириной, где как раз этот недостаток исправим, чтоб все корректно выводило.

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

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

Автоматическая высота видео

Видео просмотр на адаптивном блоке с помощью CSS3

HTML

Код

CSS

Код

.video-rolik {
  margin-bottom: 20px;
}
.obrazovatel-video {
  position: relative;
  padding-top: 56.25%;
}
.obrazovatel-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  border: none;
}

Здесь автоматически поставили высоту, где при большой ширине автоматически увеличивается, при уменьшение аналогично идет на спад, что для любого блока станет отличным решением.

Видео по центру с максимальной шириной

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

Теперь, что касается "резинового" сайта, то здесь задаем максимальную ширину видео ролика в 800 или 1000 пикселей, где нужно отцентрировать, это делается для того, чтоб оно не было слишком большим.

CSS

Код

.video-rolik {
  max-width: 600px;
  margin: 0 auto 20px;
}
.obrazovatel-video {
  position: relative;
  padding-top: 56.25%;
}
.obrazovatel-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  border: none;
}

К этому варианту прикреплена demo страница.

Демонстрация

Адаптивное видео в два ряда

Вид с монитора:

Адаптивное видео изменяющее свои размеры на CSS

Вид с мобильного экрана:

HTML

Код

CSS

Код

.adaptivnoye {
  overflow: hidden;
}
.adaptivnoye-vidos {
  margin: 0 -10px 0 -10px;
}
.adaptivnoye-kanus {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}
.adaptivnoye-reliz {
  position: relative;
  padding-top: 56.25%;
  margin: 0 10px 0 10px;
  box-sizing: border-box;
}
.adaptivnoye-reliz iframe {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  border: none;
}

Установка завершена.

Мобильная настройка, это когда ширина станет 800px то автоматически выводиться в одну колонку:

Код

@media screen and (max-width:800px){
  .adaptivnoye-kanus {
  width: 100%;
  }
}

Этот мобильный класс настроен под второй вариант.

Адаптивные блоки YouTube на 3 колонки

HTML

Код

CSS

Код

.pokaz-video-rolika {
  overflow: hidden;
}
.pokaz-video-rolika-kidam {
  margin: 0 -10px 0 -10px;
}
.pokaz-video-rolika-vesad {
  float: left;
  width: 33.3%;
  margin-bottom: 20px;
}
.pokaz-video-rolika-askib {
  position: relative;
  padding-top: 56.25%;
  margin: 0 10px 0 10px;
  box-sizing: border-box;
}
.pokaz-video-rolika-askib iframe {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  border: none;
}

Здесь установка завершена, теперь нужно добавить адаптивный вид для мобильного просмотра, где при ширине от 1200px производится вывод на 2 колонки, от 800px идет в одну.

CSS

Код

@media screen and (max-width:1200px){
  .pokaz-video-rolika-vesad {
  width: 50%;
  }
}
@media screen and (max-width:800px){
  .pokaz-video-rolika-vesad {
  width: 100%;
  }
}

Вашему вниманию представлены решение по адаптивному виду в Автоматической высоте, также поставлено видео по центру, где идет по максимальной шириной, далее идет 2 видео в один ряд, и завершаем в 3 видео, которые аналогично установлены в ряд.

Демонстрация

Также рекомендую материал по аналогичной теме:

Адаптивное YouTube видео для сайта на CSS
Адаптивное видео сайта с применением CSS

22 Августа 2019 Просмотров: 1600 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0