Адаптивная верстка Youtube видео ролика (без использования API/плагинов)

В продолжение статьи о адаптивном показе видео с видео-хостинга YouTube. Случай, когда воспроизведением ролика не требуется управлять, позволяет отказаться от использования 3rd part плагинов или YouTube API.

Пусть у нас в верстке есть контейнер:

Инициализация

Я использую jQuery, к которому привык, но это не обязательно.

ID ролика сохраним в переменной video_id.

Собираем url со всеми нужными флажками autoplay, loop, mute, а не нужные флажки сбрасываем — rel, controls, showinfo и т.п.

Создаём youtube iframe с полученной ссылкой:

Следим за размерами видео

За размерами фрейма следит специальная функция vidRescale. Она изменяет отступы, чтобы центрировать видео и размеры, чтобы закрыть полностью «сцену», в роли которой у нас контейнер .video-container.

Значение ratio в примере — стандартное. Как получить aspect ratio для нестандартных видео — читайте тут.

Т.к. vidRescale  должна быть вызвана в определенный момент, а именно когда меняются размеры контейнера, то нужно правильно организовать её вызов. Если размеры контейнера меняются вместе с размерами окна (window), то используйте следующий код:

Если надо отслеживать только контейнер, то пишем что то вроде следующего:

Стили

Добавим вспомогательные стили:

Пример реализации

Ну и в конце живой пример, основанный на описанной выше технике.

Мало букафф? Читайте есчо !

Брендовый сайт премиум корма марки Blitz

Август 15, 2016 г.

Этот проект на Wordpress мне достался на доработку. Я не часто занимаюсь сайтами на WP, есть тому причины, но рынок диктует свои правила. Огромное число ...

Читать

Вложенные прокручиваемые (scrollable) элементы в макете android

Февраль 6, 2025 г.

Если вы используете, к примеру, RecyclerView компонент внутри ScrollView layout, то могут возникнуть коллизии, связанные с тем, что оба элемента пытаются обработать прокрутку. Вот типичные варианты решения. Отключение прокрутки в RecyclerView ...

Читать

Настроить порт для подключения к базе данных в WP

Февраль 18, 2023 г.

Отдельной переменной, а-ля DB_PORT, для выбора произвольного порта подключения к базе данных в Wordpress нет. Но порт можно задать как часть константы DB_HOST, например, установим порт 10101: [crayon-68b0a5653b23f970116573/] Настройки хранятся ...

Читать

Интеграция поиска Яндекс с сайтом на Drupal

Январь 22, 2016 г.

Вся мощь поисковой машины на вашем сайте. Это реально :). Синонимы, морфология, транслит и другие прелести, которыми вас может порадовать Яндекс, и скорее ...

Читать
 

Комментарии к «Адаптивная верстка Youtube видео ролика (без использования API/плагинов)»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: