Встраиваем видео + RuTube и VK

После замедления YouTube в России возник вопрос о встраивании видео на веб-сайтах. Альтернативой видеохостингам могут служить RuTube и VK Видео. Однако, к сожалению, не все пользователи готовы использовать различные методы для обхода блокировок YouTube.

Данные видеохостинги, хотя и предоставляют удобные функции, на сегодняшний день не могут соперничать с YouTube. Одной из основных причин является реклама, которая на российских платформах часто бывает навязчивой. Мы уже привыкли к более комфортному просмотру видео без перерыва на рекламные вставки, что делает опыт использования RuTube и VK Видео менее приятным.

Стандартное встраивание видео через iframe оказывается не самым оптимальным решением и может негативно сказываться на скорости загрузки страницы. В большинстве своих проектов я использую библиотеку lazysizes для оптимизации загрузки изображений и контента. Она позволяет загружать элементы по мере необходимости, не загромождая первоначальный рендер страницы.

В связи с этим я доработал небольшой плагин ls.video-embed.js для lazysizes, который предоставляет возможность встраивания видео с поддержкой RuTube и VK Видео. Этот инструмент не только упрощает процесс интеграции, но и улучшает производительность сайта, позволяя пользователям наслаждаться видео, не теряя в скорости загрузки.

Скачать плагин можно по [ссылке]

    <script src="lazysizes.js"></script>
    <script src="ls.video-vk-rutube-embed.js"></script>

    <!-- VK видео -->
    <div class="video-container lazyload" 
        data-vkvideo="https://vk.com/video-216363310_456239046" 
        data-thumbnail="ссылка на превью"
    >
        <button class="play-btn" aria-label="play"></button>
    </div>
    
    <!-- RuTube -->
    <div class="video-container lazyload" 
        data-rutube="678aa2fab3084ec54829979c92bc2281" 
        data-rutubeParams="skinColor=7cb342" 
        data-thumbnail="ссылка на превью (не обязательно)"
    >
        <button class="play-btn" aria-label="play"></button>
    </div>

Пример работы плагина