YYellowVSL
GitHub

Open source · MIT · v1.5.0

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

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

Открыть пример Скачать 1.5.0
  • 0 ₽за видеотрафик
  • 47 КБminified-сборка
  • 0runtime-зависимостей
Видео загружается с YouTube
Smart Autoplay
Smart Progress
No-seek forward
Continue Watching
CTA & hooks
Popup & sticky

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

Функции для VSL-лендинга

Видео хранится и загружается через YouTube. YellowVSL добавляет свою панель управления, Smart Progress, CTA и другие функции VSL-плеера.

01

Smart Progress

Первые 10% просмотра занимают 30% шкалы, а 50% - 75%. Контрольные точки можно настроить под свой ролик.

010→3050→75100
02

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

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

03

Smart Autoplay

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

04

CTA, подсказки и блоки лендинга

CTA - кликабельная кнопка со ссылкой. Mini-hook - короткая текстовая подсказка без ссылки. Для скрытого блока укажите CSS-селектор, например #offer или .order-form. Плеер покажет его на заданной секунде.

05

Continue Watching

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

06

Popup, sticky и fullscreen

В полноэкранном режиме панель управления скрывается после запуска и возвращается по тапу. Закрытие popup или sticky ставит видео на паузу.

Примеры

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

Все примеры используют выбранное YouTube-видео и последнюю стабильную версию YellowVSL.

Основной VSL

Smart Progress, CTA и подсказка по таймеру

Полное видео · 39:15
Фрагмент

10-16 сек · 1,5× · повтор

Popup

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

Popup нужен, когда видео должно открываться по кнопке и не занимать место в макете. Плеер загружается заранее; при закрытии видео ставится на паузу.

События

Что можно отслеживать

Плеер создаёт браузерные события, которые можно передать в Метрику, GA4 или свою систему аналитики.

  • Запуск и пауза
  • Прогресс просмотра и продолжение
  • Показ и клик по CTA
  • Завершение просмотра и ошибки

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

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

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

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

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

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

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

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

Матрица Progress, popup и sticky

Точки Smart Progress можно задавать дробями 0..1 или обычными процентами 0..100. Дефолтная кривая остаётся встроенной.

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

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

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

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

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