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

Суть проблемы

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

Способ решения

Способ 1:

У кода для встраивания внутри есть параметр width. Например, width=”640″. Это значит, что видео будет шириной 640 px (пикселей). Число “640” в данном случае можно заменить на “100%”. То есть:

Было:

width="640"

Стало:

width="100%"

Таким образом встроенное видео на сайте всегда будет растянутым на всю ширину.

Но есть и минусы. Например, на мобильных устройствах при просмотре будет растянута высота ролика. Кроме того, изображение-превью будет обрезано (если на нем есть текст, текст тоже обрежется).

Способ 2:

В случае с видео, встроенным из ВК, можно заменить на “100%” и ширину, и высоту. То есть:

Было:

width="640" height="360"

Стало:

width="100%" height="100%"

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

Но:

Однако, правильнее всего сделать любое встроенное видео адаптивным. Для этого понадобится немного дополнить код сайта.

Как сделать адаптивным

В код стиля на сайте (обычно основной файл с расширением .css) нужно добавить следующий код:

/* Адаптация встроенных видео */
.video-responsive {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%; }
/* Конец кода адаптации встроенных видео */

Теперь при встраивании видеороликов с различных видеохостингов, например, из Вконтакте (VK video) или YouTube, встроенный код нужно оборачивать в следующий div: “video-responsive”.

То есть код встроенного видео должен быть таким:

<div class="video-responsive">
ЗДЕСЬ КОД ВИДЕО
</div>

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