Подход, которым пользуются многие веб=разработчики для создания адаптивных изображений, нельзя использовать для видео с сайтов Youtube и Vimeo, так как они предоставляют свое содержимое, используя встроенные элементы iframe. Стандартный код, рекомендуемый для встраивания видео с сайта Youtube, следующий:

<iframe width="560" height="315" src="http://youtube.com/embed/m4cgLL8JaVI?rel=0" frameborder="0" allowfullscreen></iframe>

Есть два основных способа сделать встроенное видео адаптивным. Перед тем, как начать рассказывать о них, избавимся от лишних атрибутов:

<iframe src="http://www.youtube.com/embed/m4cgLL8JaVI?rel=0"frameborder="0" allowfullscreen></iframe>

Первый способ создает адаптивное видео с использованием почти только CSS. Для него нужно просто обернуть элемент iframe в блок с классом:

<div class="responsive-container">
        <iframe src="http://youtube.com/embed/m4cgLL8JaVI?rel=0" frameborder="0" allowfullscreen>
        </iframe>
</div>

После этого применим такой код CSS к блоку с классом и элементу iframe внутри него:

.responsive-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
}
.responsive-container iframe {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
}

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

В результате получаем следующее:

Для второго способа все еще нужен оборачивающий блок, но адаптивность создается с помощью плагина JQuery под названием FitVids, разработанного Chris Coiyer, Dave Rupert и другими:

$(document).ready(function(){
        $("#thing-with-videos").fitVids();
});

В случае с кодом выше родительский блок с идентификатором #thing-with-videos будет динамически изменять размер.

Обратите внимание, оба эти способа могут использоваться для создания встроенных адаптивных карт. Но у них обоих есть один и тот же недостаток: карты Google или Bing не будут центрироваться, увеличиваться или уменьшаться при расширении или сужении их родительского блока. Для этого нужно другое решение, о котором мы расскажем позже.

Дополнительно можно использовать сервис адаптивного встраивания, который автоматически создает код HTML и код CSS для видео с сайтов YouTube, Vimeo, Dailymotion и других для предоставленной веб-ссылки.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание таблицы с возможностью удаления строк
• Создание более плотных абзацев с использованием переноса слов CSS3
• Простой эффект параллакса с использованием единиц измерения em