После замедления 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>
Пример работы плагина
VK видео
RuTube
Vimeo
YouTube
