Видео с других платформ

Featherlight — минималистичная lightbox-библиотека на JavaScript, изначально ориентированная на показ изображений и HTML-контента. При этом она хорошо подходит и для работы с видео, размещённым на сторонних платформах: YouTube, Vimeo и других сервисах, предоставляющих iframe-встраивание. Основная идея заключается в том, что Featherlight не «знает» о видео напрямую — она отображает HTML, а управление воспроизведением и параметрами остаётся за iframe-плеером.

Общий принцип работы с видео

Featherlight отображает содержимое, переданное через:

  • data-featherlight
  • href (для ссылок)
  • JavaScript-инициализацию

Для внешних видеоплатформ используется iframe, который подгружается внутрь lightbox-контейнера. Важный момент: Featherlight не управляет жизненным циклом видео, поэтому при закрытии окна iframe просто удаляется из DOM, что автоматически останавливает воспроизведение.

Подключение библиотеки

Для работы с видео требуется стандартное подключение Featherlight и jQuery:

<link rel="stylesheet" href="featherlight.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="featherlight.min.js"></script>

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

YouTube: базовое встраивание

Самый простой способ — использовать iframe с embed-URL YouTube.

<a href="#" data-featherlight="
  <iframe 
    width='800' 
    height='450' 
    src='https://www.youtube.com/embed/VIDEO_ID' 
    frameborder='0' 
    allow='autoplay; encrypted-media' 
    allowfullscreen>
  </iframe>
">
  Видео с YouTube
</a>

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

  • Используется именно /embed/, а не стандартный URL.
  • HTML iframe передаётся строкой в data-featherlight.
  • Размеры задаются явно, иначе lightbox подстроится под минимальный размер.

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

YouTube поддерживает передачу параметров через query-string:

src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&rel=0"

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

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

Пример с автозапуском:

<a href="#" data-featherlight="
  <iframe 
    width='800' 
    height='450' 
    src='https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1' 
    frameborder='0' 
    allow='autoplay; encrypted-media' 
    allowfullscreen>
  </iframe>
">
  Видео с автозапуском
</a>

Vimeo: особенности подключения

Vimeo также использует iframe, но с другим форматом URL:

src="https://player.vimeo.com/video/VIDEO_ID"

Пример:

<a href="#" data-featherlight="
  <iframe 
    src='https://player.vimeo.com/video/VIDEO_ID?autoplay=1' 
    width='800' 
    height='450' 
    frameborder='0' 
    allow='autoplay; fullscreen' 
    allowfullscreen>
  </iframe>
">
  Видео с Vimeo
</a>

Vimeo предоставляет дополнительные параметры:

  • loop=1
  • title=0
  • byline=0
  • portrait=0

Они позволяют убрать служебную информацию и сделать видео визуально «чистым».

Использование JavaScript-инициализации

При необходимости динамически подставлять видео или управлять логикой открытия используется Jav * aScript:

$.featherlight({
  html: `
    <iframe
      width="800"
      height="450"
      src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1"
      frameborder="0"
      allow="autoplay; encrypted-media"
      allowfullscreen>
    </iframe>
  `
});

Этот подход удобен при работе с галереями, AJAX-контентом или сложной логикой интерфейса.

Адаптивность и пропорции видео

По умолчанию размеры iframe фиксированы. Для адаптивного поведения используется CSS-обёртка с сохранением пропорций:

<div class="video-wrapper">
  <iframe src="..."></iframe>
</div>
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Этот контейнер передаётся в Featherlight вместо чистого iframe. В результате видео масштабируется под размер окна, не нарушая пропорций.

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

Featherlight автоматически подстраивается под содержимое, но для видео часто задают ограничения:

.featherlight-content {
  max-width: 90vw;
  max-height: 90vh;
}

Это предотвращает выход видео за пределы экрана на небольших устройствах.

Остановка видео при закрытии

Дополнительных действий не требуется: при закрытии lightbox iframe удаляется, и плеер прекращает воспроизведение. Если используется кастомный контейнер или повторное использование DOM-элементов, рекомендуется очищать содержимое в колбэке:

$(document).on('featherlight:afterClose', function(event) {
  $('.video-wrapper').remove();
});

Безопасность и экранирование

Передача HTML через data-featherlight требует аккуратности:

  • не использовать пользовательский ввод напрямую;
  • экранировать кавычки;
  • избегать динамической генерации iframe без проверки источника.

Featherlight не выполняет фильтрацию HTML, ответственность за безопасность полностью лежит на разработчике.

Поддержка других платформ

Любая платформа, предоставляющая iframe-встраивание, работает по тому же принципу:

  • RuTube
  • Dailymotion
  • Twitch (в режиме embed)

Достаточно корректного embed-URL и разрешений allow.

Featherlight в контексте видео выступает как универсальный контейнер, не накладывая ограничений на источник и формат, что делает его удобным инструментом для интеграции медиаконтента из внешних сервисов.

Оглавление