Как сделать видео с youtube адаптивным на вашем сайте

02.03.2016
TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один скрипт JS. Таким образом можно сделать адаптивным любое видео:

  • видео с youtube;
  • видео с vimeo;
  • видео в iframe;
  • видео в object;
  • видео в embed;
  • видео в теге <video>;
  • и любые другие.

Адаптивное видео на сайте

Добавим такой скрипт, чтобы помещать наше видео в родительский блок с классом .video-wrap (скрипт этот нужен только, если у вас на сайте много таких видео или нет возможности вручную поместить видео внутри блока .video-wrap, особенно он удобен для сайтов на CMS WordPress):

$('iframe').wrap('<div class="video-wrap"></div>');

По итогу, разметка должна быть примерно в таком виде:

<div class="video-wrap">
  <iframe src="https://www.youtube.com/embed/VAIPaMnSBEc" allowfullscreen></iframe>
</div>

Добавим такие стили для родительского блока .video-wrap и помещенного в него видео:

.video-wrap {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56.25%;
}

.video-wrap iframe, .video-wrap object, .video-wrap embed {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

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

TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Полезная инфа:

Оставить комментарий