Видео с YouTube

Featherlight — лёгкая JavaScript-библиотека для создания модальных окон (lightbox). Она не требует сложной инициализации и хорошо подходит для встраивания мультимедийного контента, включая видео с YouTube.

Для работы необходимы jQuery и файлы самой библиотеки:

<link rel="stylesheet" href="featherlight.min.css">
<script src="jquery.min.js"></script>
<script src="featherlight.min.js"></script>

Featherlight автоматически инициализируется на элементах с атрибутом data-featherlight. Это позволяет обойтись без явного JavaScript-кода в простых сценариях.

Принцип встраивания YouTube-видео

YouTube-видео в Featherlight загружается через iframe. Lightbox не управляет плеером напрямую, а лишь создаёт контейнер для отображения iframe-контента.

Базовая разметка:

<a href="https://www.youtube.com/embed/VIDEO_ID"
   data-featherlight="iframe">
    Смотреть видео
</a>

Ключевые моменты:

  • используется embed-URL, а не обычная ссылка на YouTube;
  • значение iframe сообщает Featherlight, что контент должен быть загружен во фрейм;
  • iframe создаётся динамически при открытии модального окна.

Управление размерами iframe

По умолчанию Featherlight задаёт минимальные размеры iframe, которые редко подходят для видео. Размеры можно определить через атрибут data-featherlight-iframe-*.

Пример с фиксированными размерами:

<a href="https://www.youtube.com/embed/VIDEO_ID"
   data-featherlight="iframe"
   data-featherlight-iframe-width="960"
   data-featherlight-iframe-height="540">
    Видео в HD
</a>

Поддерживаемые параметры:

  • data-featherlight-iframe-width
  • data-featherlight-iframe-height
  • data-featherlight-iframe-frameborder
  • data-featherlight-iframe-allowfullscreen

Это позволяет полностью контролировать внешний вид видеоплеера.

Автовоспроизведение и параметры YouTube

Дополнительные параметры YouTube передаются через строку запроса embed-URL.

Пример с автозапуском и отключением рекомендаций:

<a href="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&rel=0"
   data-featherlight="iframe"
   data-featherlight-iframe-width="800"
   data-featherlight-iframe-height="450">
    Воспроизвести
</a>

Часто используемые параметры:

  • autoplay=1 — автоматический старт видео
  • controls=0 — скрытие панели управления
  • mute=1 — запуск без звука
  • rel=0 — отключение похожих видео

Featherlight не фильтрует параметры, поэтому поддерживается вся официальная спецификация YouTube Player API.

Инициализация через JavaScript

Для сложных сценариев используется программный вызов:

$.featherlight({
    iframe: 'https://www.youtube.com/embed/VIDEO_ID?autoplay=1',
    iframeWidth: 1024,
    iframeHeight: 576
});

Такой подход удобен, если:

  • видео выбирается динамически;
  • требуется предварительная логика;
  • открытие происходит не по клику на ссылку.

Все iframe-параметры задаются напрямую в объекте конфигурации.

Автоматическая остановка видео при закрытии

При закрытии lightbox iframe удаляется из DOM, что автоматически останавливает воспроизведение. Это важное преимущество Featherlight по сравнению с библиотеками, которые лишь скрывают контейнер.

Механизм работы:

  • при закрытии вызывается close();
  • iframe уничтожается;
  • YouTube-плеер завершает сессию без дополнительных API-вызовов.

Дополнительных обработчиков для остановки видео не требуется.

События жизненного цикла

Featherlight предоставляет события, позволяющие управлять поведением модального окна с видео.

Пример:

$(document).on('featherlight:opened', function () {
    console.log('Видео открыто');
});

$(document).on('featherlight:closed', function () {
    console.log('Видео закрыто');
});

Практическое применение:

  • аналитика просмотров;
  • блокировка фонового скролла;
  • синхронизация с другими компонентами интерфейса.

Адаптивность и мобильные устройства

Для адаптивного отображения рекомендуется не фиксировать размеры, а использовать CSS.

Пример:

.featherlight-iframe .featherlight-content {
    width: 90vw;
    height: 50vw;
    max-width: 960px;
    max-height: 540px;
}

Такой подход:

  • сохраняет пропорции 16:9;
  • корректно работает на мобильных экранах;
  • не требует JavaScript-расчётов.

Кастомизация внешнего вида

Featherlight позволяет переопределять стили без изменения исходных файлов.

Основные классы:

  • .featherlight
  • .featherlight-content
  • .featherlight-close-icon

Пример изменения фона:

.featherlight {
    background: rgba(0, 0, 0, 0.85);
}

Видео при этом остаётся неизменным, так как iframe изолирован от стилей родителя.

Использование нескольких видео

Для коллекций видео достаточно менять href или параметр iframe:

<a data-video="VIDEO_1" class="video-link">Видео 1</a>
<a data-video="VIDEO_2" class="video-link">Видео 2</a>
$('.video-link').on('click', function () {
    $.featherlight({
        iframe: 'https://www.youtube.com/embed/' + $(this).data('video'),
        iframeWidth: 800,
        iframeHeight: 450
    });
});

Это решение масштабируется без дублирования разметки и легко интегрируется с шаблонами.

Ограничения и особенности

  • Featherlight не взаимодействует с YouTube API напрямую.
  • Управление воспроизведением возможно только через параметры URL.
  • Для сложных сценариев (плейлисты, таймкоды, события плеера) требуется отдельная интеграция с YouTube IFrame API внутри iframe.

Несмотря на это, Featherlight остаётся одним из самых простых и надёжных решений для показа YouTube-видео в модальных окнах без избыточной архитектуры и зависимостей.

Оглавление