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

Адаптивное видео YouTube при помощи CSS

Если вы устанавливаете на своем сайте плеер от YouTube, то нужно его сделать адаптивным на все мобильные аппараты, что создается с помощью CSS. Чтобы масштабировать видео YouTube под любой браузер, планшет или мобильное устройство для адаптивного дизайна, вы можете использовать решение CSS или Javascript для достижения этой цели. Но в нашем варианте все будет исполнено на чистом CSS, который отлично подстраивается под разные размеры мобильных гаджет.

Первое, что вам нужно, это встроенный код YouTube iframe, воспользуйтесь им в настройках общего доступа к видео с сайта YouTube. Что можно наблюдать, как в отдельном блоке или в модальном окне. Где при сжатии, плеер будет своей основой вылазить. Но только мы под него пропишем стили, так все изначально корректно будет смотреться, это даже на самом небольшом экране телефона.

Установка проста, задаем класс и выставляем стили:

HTML

Код

CSS

Код

.adaptivnoye-video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}

.adaptivnoye-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

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

Подробнее описано и представлено несколько вариантов под разные плееру в теме как сделать адаптивное видео, где показан тэг iframe, а также есть другие, что выводит видео.

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

15 Февраля 2020 Просмотров: 1551 Комментариев: (0)

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

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

Kosten

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