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

Дата: 01.10.2015 Просмотров: 1362 Комментарии: 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%;
}

Комментарии

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

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

Новая Почта c калькулятором + отделения для Opencart 2.x

Новая Почта c калькулятором + отделения для Opencart 2.x

Модуль новой почты с калькулятором стоимости доставки + отделения для Opencart 2.x Калькулятор ново..

200 грн. 300 грн.

Модуль Приват24 для Opencart 2.x

Модуль Приват24 для Opencart 2.x

Модуль Приват24 для Opencart 2.x Подключает сервис онлайн оплаты Приват24 на сайт. Установка спосо..

200 грн. 300 грн.

Новая Почта c калькулятором + отделения для Opencart 3.x

Новая Почта c калькулятором + отделения для Opencart 3.x

Модуль новой почты с калькулятором стоимости доставки + отделения для Opencart 3.x Калькулятор ново..

300 грн.