Есть много способов размещения и отображения видео на сайте. Вы можете размещать файлы видео на сервере хостинга и отображать его с помощью тега 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%; }