Как создать плеер для видео со своими элементами управления на Тильде?

1. Создаешь в Зеро блоке элемент Shape. Добавляешь этому элементу класс, вписываешь этот класс в генератор модификации в поле «Класс видео». Чтобы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь class;
2. Добавляешь в Зеро блок элементы для управления видео: плей, пауза, включить звук и выключить звук. Эти элементы могут быть любым типом элементов. Например: shape с загруженным в него изображением. Добавляешь каждому элементу свой класс и вписываешь их в генератор.
3. Добавляешь прямую ссылку на видео. Например из Kinescope:

2.1. Регистрируемся на Kinescope;
Чтобы активировать бонус на 2000 ₽, нужно внутри личного кабинета Kinescope написать в чат поддержки и указать промокод NOLIM

2.2. Перед загрузкой видео в Kinescope убедитесь в следующем:

• Видео в формате mp4, если нет его можно перевести в этот формат при помощи бесплатного сервиса Cloudconvert;
• Разрешение видео должен быть не больше 1080×1920px (В пропорциях 9:16);
• Размер видео, чем меньше, тем быстрее загрузка как сайта, так и самого видео. Для сжатия рекомендуем использовать данный сервис;

2.3. Загрузив видео в Kinescope нажимаем на 3 точки → Копировать ссылку → Скопировать ссылку на видео, после вставляем в генератор.

1. Чтобы наша модификация восприняла ссылку с видео она должна быть в таком формате https://kinescope.io/201 558 518/720p — где на конце мы указываем разрешение файла 360p 480p или 720p
2. Перед вставкой видео в генератор, можешь себя проверить: открывается ли видео по прямой ссылке? Если нет — скорректируй разрешение файла в конце ссылки.

Настройки генератора модификации:

• «Ссылка на видео» — укажите URL-адрес видео для воспроизведения;
• «Класс видео» — задайте CSS-класс Shape-элемента видео;
• «Класс превью» — укажите CSS-класс для Shape-элемента превью;
• «Класс кнопки воспроизведения» — укажите CSS-класс для кнопки воспроизведения видео;
• «Класс кнопки остановки» — задайте CSS-класс для кнопки остановки видео;
• «Класс кнопки отключения звука» — укажите CSS-класс для кнопки отключения звука;
• «Класс кнопки включения звука» — задайте CSS-класс для кнопки включения звука;
• «Масштабирования видео» — выберите нужный вариант  "Ширина или высота равняется ширине или высоте шейпа"/"Целиком помещается внутри шейпа";

Чекбоксы:

• «Воспроизведение при наведении» — включите автозапуск видео при наведении курсора на элемент;
• «Показывать элементы управления» — определите, будут ли отображаться элементы управления видео (стандартные кнопки управления плеера);
• «Автовоспроизведение» — задайте, чтобы видео начинало воспроизводиться автоматически при загрузке;
• «Отключить звук по умолчанию» — отметьте, если хотите установить звук в выключенное состояние при запуске видео;
• «Зацикливание видео» — включите зацикливание, чтобы видео воспроизводилось повторно после завершения.

3.Копируешь сгенерированный HTML код и вставляешь его в блок Т123.

Важно!

• При загрузке сайта браузеры накладывают ограничения на автоматическое воспроизведение видео с включенным звуком. Для корректной работы модификации пользователю необходимо выполнить любое взаимодействие с сайтом до запуска видео.
• Нужно учитывать, что для корректного отображения видео (чтобы оно полностью помещалось в шейп) нужно подобрать правильное соотношение ширины и высоты видео. Размеры видео не должны быть больше размеров шейпа.