YYellowVSL
GitHub

Open source · MIT · v1.6.0

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

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

Открыть пример Скачать 1.6.0
  • 0 ₽за видеотрафик
  • 49 КБ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 может открыть ссылку или скрытый блок после клика. Блок можно раскрыть автоматически через reveals[]. Mini-hook - необязательная текстовая подсказка, которая появляется на заданное время.

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

Ссылка, блок по клику или автооткрытие

CTA может вести по ссылке или раскрывать блок и прокручивать к нему страницу. reveals[] открывает блок автоматически в заданное время.

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

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

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

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

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

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

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

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

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

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

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