YYellowVSL GitHub

Open source · MIT · v1.2.0

VSL-плеер на YouTube.
Без оплаты за просмотры.

Собственный интерфейс, Smart Autoplay, Smart Progress, CTA и продолжение просмотра. Один JavaScript-файл, никакого кабинета и серверной части.

Открыть живые примеры Скачать 1.2.0
  • 0 ₽за видеотрафик
  • 38 КБminified-сборка
  • 0runtime-зависимостей
Живой YouTube backend
Это настоящий плеер, а не картинка
Smart Autoplay
Smart Progress
No-seek forward
Continue Watching
CTA & hooks
Popup & sticky

Основные возможности

Всё, что нужно VSL-лендингу.
Без лишней платформы вокруг.

YellowVSL использует YouTube как видеобэкенд и оставляет посетителю только интерфейс вашего VSL-плеера.

01

Smart Progress включён по умолчанию

Первые 10% просмотра занимают 30% визуальной шкалы, 50% превращаются в 75%, а окончание всегда остаётся честными 100%.

010→3050→75100
02

Назад можно. Вперёд нельзя.

Посетитель возвращается в уже просмотренную область, но не перескакивает питч.

03

Smart Autoplay

Автозапуск без звука, понятное предложение включить звук и возврат к началу после клика.

04

CTA и раскрытие лендинга

Покажите CTA в любом углу кадра, mini-hook или любой блок страницы в нужную секунду медиавремени.

05

Continue Watching

Позиция хранится локально 30 дней. При возвращении зритель выбирает: продолжить или начать сначала.

06

Popup, sticky и fullscreen

Закрытие или скрытие плеера всегда ставит видео на паузу. Фоновое воспроизведение исключено.

Живые примеры

Проверьте функции прямо здесь

Все примеры работают на одном публичном YouTube-видео и текущей production-сборке YellowVSL.

Основной VSL

CTA в углу, mini-hook и Smart Progress

0–60 сек
На второй секунде появится mini-hook слева сверху, на шестой — CTA справа снизу и оффер.
Фрагмент

9:16 · 10–16 сек · 1.5× · loop

Popup

Видео поверх страницы

При открытии popup другие экземпляры автоматически ставятся на паузу. Закрытие останавливает и сам popup.

События

Аналитика остаётся вашей

0

YellowVSL ничего не отправляет сам. События всплывают в DOM, а вы подключаете нужную аналитику.

Ожидание событий…

Установка за минуту

Вставьте URL видео и один script

Сниппет привязан к стабильной версии. Обновление сайта не сломает уже работающий лендинг.

HTML
<div
  data-yellow-vsl
  data-video="https://youtu.be/VIDEO_ID">
</div>
<script defer
  src="https://cdn.jsdelivr.net/gh/dvygolov/yellow-vsl@v1.2.0/dist/yellow-vsl.min.js">
</script>
Поддерживаемые ссылкиyoutube.com, youtu.be, Shorts, embed и чистый ID
Несколько плееровМожно размещать сколько угодно экземпляров на одной странице
Настройка дизайнаCSS-переменные, цвета, радиус и 16:9 / 9:16

Последний стабильный релиз

Скачайте файл или подключите CDN

Production-сборка публикуется через GitHub Releases. Исходный код открыт под лицензией MIT.

Скачать minified Читаемая IIFE ESM-сборка