Адаптивная вёрстка, урок второй. Адаптивное видео на сайте

В этом уроке вы узнаете, как добавить видео на сайт с помощью элементов <iframe> и <video>, а также как сделать контейнер с видео адаптивным.

Тег <iframe> позволяет воспроизводить видео со сторонних ресурсов, таких как YouTube и Vimeo. Элемент создаёт на странице вложенную область, в которую загружается другая html-страница (при наличии атрибута src) или любой другой контент. Элемент <iframe> не должен находиться внутри элемента <a> или <button>. Для элемента доступны глобальные атрибуты, а также собственные:

Таблица 1. Атрибуты тега <iframe>
Атрибут Описание, принимаемое значение
height Задаёт высоту фрейма в px.
name Имя встраиваемого контента, не должно начинаться со знака _ и должно содержать больше одного символа.
sandbox Набор ограничений для страницы, загруженной во фрейм. Если значение атрибута не указано, применяются все ограничения одновременно. Возможные значения:
allow-forms — разрешает встроенному контенту отправлять формы
allow-scripts — позволяет запуск скриптов, принадлежащих фрейму, кроме всплывающих окон
allow-top-navigation — позволяет открывать ссылки, находящиеся внутри фрейма, в родительском окне
allow-same-origin — позволяет обрабатывать содержимое фрейма как уникальное, отдельно от содержимого родительской страницы.

Для атрибута sandbox можно указывать как одно, так и несколько значений, перечислив их через пробел.

src url встраиваемой страницы
srcdoc Текст, описывающий содержимое встраиваемого документа. Может обрамляться тегами <p>, если нужно разделить текст на абзацы.
width Ширина фрейма.

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

adaptive-video-page
Рис. 1. Адаптивное видео на сайте

Перейти на страницу

1. Адаптивное HTML5 видео

Когда элемент <video> впервые стал появляться на страницах сайтов, для воспроизведения видео-файлов необходимо было добавлять три файла в форматах .mp4 (для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7), .webm (для Firefox4, Opera, и Chrome) и .ogg/ogv (для старых версий браузеров Firefox и Opera). В настоящее время все современные браузеры поддерживают формат .mp4.

<video controls poster="https://html5book.ru/wp-content/themes/papercuts/video/martynko.png" preload="none">
<source src="https://html5book.ru/wp-content/themes/papercuts/video/martynko.mp4" type="video/mp4">
</video>

Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим элементу <video> следующие свойства:

video {
  width: 100%;
  height: auto;
  max-height: 100%;
}

2. Адаптивное видео с YouTube или Vimeo

Видео с YouTube или Vimeo добавляется на страницу с помощью элемента <iframe>. Для управления адаптивностью видеоплеера обернём фрейм дополнительным блоком с классом thumb-wrap. Получить код фрейма Vimeo можно по кнопке Share , далее значок тега. На YouTube нужно щёлкнуть правой кнопкой мыши по видео, далее «Копировать HTML-код».

Видео Vimeo

<div class="thumb-wrap">
  <iframe src="https://player.vimeo.com/video/159120552?byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Видео YouTube

<div class="thumb-wrap">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe>
</div>

Чтобы сделать адаптивный блок с видео-роликом, который корректно будет отображаться на всех устройствах, воспользуемся следующим приёмом:

.thumb-wrap {
  position: relative;
  padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.thumb-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  • Создание Сайтов

    От того, что существуют современные браузеры, старыми еще не перестали пользоваться, поэтому, нужно еще лет пять, чтобы смотреть со всех устройств mp4. Телефонные браузеры вообще кроем ogg ничего не понимают.

    • Формат ogg/ogv не актуален для браузеров по крайней мере с 2014 года. На какой модели телефона и в каком браузере вы проверяли? В отношении поддержки mp4 предлагаю информацию с сайта веб-разработчиков:

      • Создание Сайтов

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

        Если разработчики равняются по Москве, то там конечно, дело обстоит получше, потому что москвичи устройства меняют как перчатки. Но страна нищая и не все могут себе позволить жить как в Москве.

        • Здесь получается все логично, раз человек не обновляет ПО и живет по старинке, значит он не пользуется Интернетом в полной мере, а читает бумажные книги, покупает все в магазине или на рынке и смотрит телевизор.

          • Сергей Почечуев

            Нет, Елена. Он просто живет по возможностям, определяя исходя из них свои потребности.

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

  • Volgo Solospn

    Спасибо за статью! Очень помогло! Видео из WP в адаптив не влазило и весь код рушило. Один вопрос : как убрать стрелку скачивание http://prntscr.com/ezj2ch ? какой тег использовать? Спасибо!
    http://first-in-life.ru/tolko-emu/kak-znakomitsya-s-devushkoj-v-kafe-13.html

  • Volgo Solospn

    Разобрался! Делюсь:
    вставить в файл со стилями:

    video::-internal-media-controls-download-button {
    display:none;
    }

    video::-webkit-media-controls-enclosure {
    overflow:hidden;
    }

    video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
    }

  • Maxxi

    В примерах, видимо, ошибочка.
    для «Видео Vimeo» class=»thumb-wrap», а для YouTube — class=»video-block».
    и этот «video-block» потом нигде не упоминается.

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