YYellowVSL
GitHub

Open source · MIT · v1.3.0

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

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

Открыть живые примеры Скачать 1.3.0
  • 0 ₽за видеотрафик
  • 44 КБ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

Полное видео · 39:15
На второй секунде появится mini-hook слева сверху, на шестой - CTA справа снизу и оффер.
Фрагмент

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

Popup

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

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

События

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

0

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

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

Установка и настройка

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

Начните с базового сниппета, затем добавьте только нужные настройки. Все примеры используют стабильную версию из CDN.

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.3.0/dist/yellow-vsl.min.js">
</script>
Поддерживаемые ссылкиyoutube.com, youtu.be, Shorts, embed и чистый ID
Несколько плееровМожно размещать сколько угодно экземпляров на одной странице
Настройка дизайнаCSS-переменные, цвета, радиус и 16:9 / 9:16
CTA по таймеру

Текст, ссылка, угол и цвета

Кнопка появится на 45-й секунде справа снизу. background задаёт фон, color - цвет текста.

JavaScript
Воспроизведение

Loop, скорость и перемотка

noSeek: "forward" блокирует переход вперёд. Значение false разрешает свободную перемотку.

JavaScript
Режимы плеера

Progress, popup и sticky

Выберите smart, real или hidden progress, включите скорость и нужный режим показа.

JavaScript
Все параметры собраны на GitHub README содержит таблицы playback, progress, controls, stage, CTA/hooks, theme, методов и событий.
Открыть полную документацию

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

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

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

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