Как встроить Youtube видео адаптивно

Содержание

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

На самом деле, ваши встроенные видео YouTube должны реагировать на запросы пользователей. В этой статье мы узнаем, как встроить адаптивные видеоролики YouTube на ваш сайт.

Я нашел 3 возможных способа достижения конечного результата. Посмотрим по порядку.

Встраивайте адаптивное видео YouTube с помощью Bootstrap

Bootstrap – самый популярный интерфейсный инструмент, помогающий разрабатывать адаптивные сайты. Это также простое решение, позволяющее сделать ваше видео на YouTube адаптивным.

Чтобы начать, вам сначала нужно включить файл CSS Bootstrap следующим образом. Если вы уже используете Bootstrap в своем проекте, пропустите этот шаг.

Адаптивное видео с YouTube правильно (HTML, CSS, JS)

Затем используйте следующий HTML-код, чтобы встроить видео с помощью Bootstrap.

Замените заполнитель VIDEO_ID фактическим идентификатором видео. Попробуйте, и вы увидите, что ваше видео отлично работает на небольших устройствах.

Вы можете прочитать об этом методе встраивания в документации Bootstrap.

Адаптивное видео YouTube с использованием Fancybox

MonsterONE

Из этого туториала Вы узнаете, как включить автоматическое воспроизведение для встроенного видео с в шаблоне Joomla.

Вы, наверное, уже знаете, как добавить видео в запись в Joomla.

YouTube

Следуйте инструкциям, предложенным ниже, для того чтобы узнать код iFrame :

Откройте видео, которое Вы хотите вставить, на YouTube.
Нажмите на кнопки Поделиться (Share) ->Встроить (Embed).
Скопируйте код из блока iframe :
Создайте/Измените (Create/edit) запись и вставьте код встраиваемового видео в режиме кода HTML . Для того чтобы это сделать, нажмите на Скрыть/Показать редактор (Toggle editor ) внизу:
Перейдите на вкладку Содержимое (Content) ->Мастер работы с записью (Article Manager):
Нажмите на кнопку Скрыть/Показать редактор (Toggle editor ), для того чтобы вставить код встроенного видео Youtube:
Добавьте ?autoplay=0 в конец ссылки видео:
Сохраните запись и обновите ваш сайт для просмотра изменений. Теперь видео будет воспроизводиться автоматически.

Еще по теме: Как сделать концерт на Ютубе

Vimeo

Следуйте инструкциям, предложенным ниже, для того чтобы узнать код iFrame :

Откройте видео, которое Вы хотите встроить на Vimeo.
Нажмите на кнопку Поделиться (Share).
Отметьте кнопку-переключатель ‘Автоматически воспроизводить это видео’ (Autoplay this video). Скопируйте код из блока Встроить (Embed):
Создайте/Измените (Create/edit) запись и вставьте код встраиваемового видео в режиме кода HTML . Для того чтобы это сделать, нажмите на Скрыть/Показать редактор (Toggle editor ) внизу:
Перейдите на вкладку Содержимое (Content) ->Мастер работы с записью (Article Manager):
Нажмите на кнопку Скрыть/Показать редактор (Toggle editor ), для того чтобы вставить код встроенного видео Vimeo:
Сохраните запись и обновите ваш сайт для просмотра изменений. Теперь видео будет воспроизводиться автоматически.