Настройка Lightbox.js для интеграции Rutube

Хотите интегрировать видеоролики Rutube в ваш сайт с помощью популярного JavaScript-плагина Lightbox.js? Ниже простое и понятное руководство.

Следуя этим инструкциям, вы сможете быстро адаптировать Lightbox.js таким образом, чтобы ваши посетители могли просматривать ролики Rutube непосредственно в удобном всплывающем окне. Это позволит сделать ваш ресурс удобнее и привлекательнее!

Для начала убедитесь, что на вашем сайте установлен пакет Lightbox.js:

1. Подключите библиотеку Lightbox.js и её CSS-файл в разделе head вашего сайта.
2. Создайте разметку изображений или ссылок, которые будут открываться в лайтбоксе.

Шаг 1: Подключение библиотеки

Если Lightbox.js ещё не подключён, добавьте следующие строки перед закрывающим тегом body:

<!-- Подключение Lightbox.css -->
<link rel="stylesheet" href="/path/to/css/lightbox.min.css">

<!-- Подключение Lightbox.js -->
<script src="/path/to/js/lightbox-plus-jquery.min.js"></script>
        

Шаг 2: Адаптация Lightbox.js для Rutube

Далее нам потребуется создать небольшой патч для Lightbox.js, чтобы он мог обрабатывать ссылки Rutube. Вот готовый пример доработанного кода:

i.plugin("lightbox", "rutube", {
    init: function(i) {
        // Регулярное выражение для парсинга ссылок Rutube
        var t = /(\/\/.*?rutube\.[a-z]+\/video\/([^\/?#]*))/;
        
        i.on("showitem.uk.lightbox", function(i, s) {
            var h, a, l = function(id, w, h) {
                s.meta = {
                    content: '<iframe width="' + w + '" height="' + h + '" src="https://rutube.ru/play/embed/' + id + '/" style="border:none;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>',
                    width: w,
                    height: h
                };
                s.type = 'iframe';
                s.promise.resolve();
            };
            
            if((a = s.source.match(t))) {
                h = a[2];
                // Здесь можно добавить проверку размеров видео
                l(h, 720, 405); // Используем фиксированные размеры по умолчанию
                i.stopImmediatePropagation();
            }
        });
    }
}),
        

Заключение

Теперь, следуя этому руководству, вы успешно настроили интеграцию Rutube с Lightbox.js. Пользователи смогут удобно смотреть ваши видеоролики прямо внутри всплывающего окна, что значительно улучшит восприятие контента вашим сайтом.