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

Дата: 01.10.2015 Просмотров: 1766 Комментарии: 0

Есть много способов размещения и отображения видео на сайте. Вы можете размещать файлы видео на сервере хостинга и отображать его с помощью тега HTML5 video. Возможно, вы используете для отображения видео YouTube или Vimeo с помощью iframe. Также можно использовать сервисы Viddler или Blip.tv, которые добавляют в код объект для отображения флеш плеера. В каждой случае для отображения видео необходимо добавлять фиксированную высоту и ширину. Например так:

<video width="400" height="300"></video>
<iframe width="400" height="300"></iframe>
<object width="400" height="300"></object>
<embed width="400" height="300"></embed>

И вот тут начинаются проблемы. Объявление фиксированных размеров для видео является не допустимым, если вы собираетесь использовать его в резиновом или адаптивном контексте. Что делать, если родительский контейнер будет сжиматься менее, чем на 400px? В этом случае контейнер с видео не будет сжиматься и выглядеть это будет ужасно.

Итак, можно ли обойти проблему так?

<!-- устанавливаем ширину 100% -->
<video width="100%" height="150"></video>

Да, можно, но только в том случае, если вы используете стандартный тег video в HTML5. Важно удалить фиксированную высоту, чтобы сохранить пропорции в видео. Лучше всего это сделать через CSS, чтобы потом не беспокоиться об HTML:

video {
	width: 100% !important;
	height: auto !important;
}

Резиновое видео для iframe видео (YouTube, Vimeo)

Наш маленький трюк, рассмотренный выше, со 100% шириной не может при размещении видео с помощью iframe. Указывать высоту в этом случае необходимо, так как в противном случае браузеры будут использовать для iframe высоту 150px (видео скорее всего будет выглядеть обрезанным). Буквально все браузеры будут отображать iframe, canvas, embed и object с размерами 300 пикселов по ширине и 150 по высоте, если этим тегам не указать нужные размеры.

К счастью, есть несколько решений для этой ситуации. Одна из техник рассмотрена еще в 2009 году Thierry Koblentz на сайте A List Apart. В этой технике видео заключается в другой элемент, который имеет заданные пропорции, и затем видео позиционируется абсолютно в этом элементе. Этим мы достигнем резиновой ширины и нужной высоты.

<div class="video">
	<!-- вставляем код youtube -->
	<iframe width="640" height="360" src="https://www.youtube.com/embed/c0kT8MwCIa0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
	<!-- вставляем код youtube -->
</div>
.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video iframe,
.video object,
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
 
.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
	max-width: 100%;
}

Комментарии

Написать комментарий


Популярные предложения