Видео с Vimeo

Featherlight — минималистичная jQuery-библиотека для создания лайтбоксов, хорошо подходящая для отображения внешнего контента, включая видео с Vimeo. В отличие от тяжёлых галерей, Featherlight не навязывает собственную логику работы с медиаконтентом, а опирается на стандартные HTML-механизмы: iframe, data-атрибуты и события жизненного цикла.

Подключение Featherlight

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

<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>

Featherlight не требует инициализации через JavaScript — базовая функциональность активируется автоматически при наличии соответствующих атрибутов в разметке.

Базовый способ отображения видео Vimeo

Видео Vimeo в Featherlight обычно подключается через iframe. Ссылка или кнопка, открывающая видео, содержит атрибут data-featherlight, указывающий на HTML-разметку iframe.

Пример разметки:

<a href="#" data-featherlight="
<iframe src='https://player.vimeo.com/video/76979871'
        width='800'
        height='450'
        frameborder='0'
        allow='autoplay; fullscreen'
        allowfullscreen>
</iframe>
">
Открыть видео
</a>

Featherlight интерпретирует содержимое data-featherlight как HTML и помещает его внутрь модального окна.

Ключевые особенности подхода:

  • полный контроль над параметрами iframe;
  • отсутствие дополнительных плагинов;
  • совместимость со стандартным плеером Vimeo.

Использование data-featherlight-type=“iframe”

Для более чистой и читаемой разметки применяется режим iframe:

<a href="https://player.vimeo.com/video/76979871"
   data-featherlight="iframe"
   data-featherlight-iframe-width="800"
   data-featherlight-iframe-height="450">
Смотреть видео
</a>

В этом случае:

  • href содержит URL плеера Vimeo;
  • Featherlight сам создаёт iframe;
  • размеры задаются через data-featherlight-iframe-*.

Этот способ предпочтителен для учебных и промышленных проектов, так как упрощает поддержку и снижает риск ошибок в HTML.

Параметры Vimeo и управление воспроизведением

Vimeo поддерживает передачу параметров через строку запроса. Они указываются прямо в URL:

https://player.vimeo.com/video/76979871?autoplay=1&title=0&byline=0

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

  • autoplay=1 — автоматический старт воспроизведения;
  • title=0 — скрытие заголовка видео;
  • byline=0 — скрытие имени автора;
  • portrait=0 — отключение аватара.

В сочетании с Featherlight это позволяет добиться поведения, близкого к нативным видеоплеерам модальных окон.

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

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

Пример с обработчиком событий:

$(document).on('featherlight_closed', function(event){
    $(event.target).find('iframe').attr('src', '');
});

Событие featherlight_closed срабатывает после закрытия окна и позволяет очистить iframe или заменить его заглушкой.

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

Featherlight позволяет задавать собственные CSS-классы:

<a href="https://player.vimeo.com/video/76979871"
   data-featherlight="iframe"
   data-featherlight-class="video-lightbox">
Видео
</a>

Пример CSS:

.video-lightbox .featherlight-content {
    max-width: 900px;
    background: #000;
    padding: 0;
}

.video-lightbox iframe {
    display: block;
}

Такой подход часто используется для:

  • удаления отступов вокруг видео;
  • установки тёмного фона;
  • адаптации под фирменный стиль.

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

Для адаптивного отображения видео рекомендуется отказаться от фиксированных размеров iframe и использовать контейнер с соотношением сторон:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

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

Разметка внутри Featherlight:

<div class="video-wrapper">
    <iframe src="https://player.vimeo.com/video/76979871"
            frameborder="0"
            allow="autoplay; fullscreen"
            allowfullscreen></iframe>
</div>

Это обеспечивает корректное масштабирование видео на экранах любой ширины.

Динамическая загрузка видео

При работе с большими списками видео или SPA-приложениями удобно инициализировать Featherlight программно:

$('.open-vimeo').on('click', function(e){
    e.preventDefault();
    $.featherlight({
        iframe: $(this).data('video'),
        iframeWidth: 800,
        iframeHeight: 450
    });
});

HTML:

<a href="#" class="open-vimeo" data-video="https://player.vimeo.com/video/76979871">
Видео
</a>

Такой способ позволяет:

  • подставлять разные видео без дублирования разметки;
  • управлять логикой открытия из JavaScript;
  • интегрировать Featherlight в сложные интерфейсы.

Особенности безопасности и производительности

Featherlight не фильтрует HTML-контент, передаваемый через data-featherlight. При работе с Vimeo это не создаёт проблем, но при генерации ссылок из внешних источников требуется строгая валидация URL.

С точки зрения производительности:

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

Типичные ошибки

Использование обычной ссылки на vimeo.com Страница Vimeo не предназначена для встраивания в iframe. Всегда используется player.vimeo.com.

Отсутствие allowfullscreen Без этого атрибута полноэкранный режим может быть недоступен.

Фиксированные размеры без адаптивности Приводит к обрезке видео на мобильных устройствах.

Роль Featherlight при работе с Vimeo

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

Оглавление