Генератор кода для видео в карточке товара Tilda

Источник видео

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

Автозапуск выполняется без звука. Без автозапуска появится кнопка Play. Для MP4 без интерфейса доступны клик и клавиши Enter / пробел для паузы и запуска.

Размер видео

MP4 заполняет контейнер с обрезкой по краям. Для VK меняется размер окна плеера; чёрные поля внутри него могут остаться. Заданный размер уменьшается на мобильных без изменения пропорций.

VK сам управляет своим интерфейсом. Полностью скрыть его этой модификацией нельзя. Для видео без интерфейса используйте прямой MP4. Доступность встраивания VK зависит от настроек ролика.

Код для Tilda

Как установить модификацию

С какими блоками работает

Модификация предназначена для ST205 — отдельной карточки товара с галереей, связанной с каталогом через ID товара. В опубликованном коде этот блок использует класс .t762 и слайды .t-slds__item. Поддерживаются ссылки VK Видео / VK Клипы, VK-код встраивания в виде URL video_ext.php и прямые ссылки на .mp4.

Другие блоки магазина, всплывающие карточки каталога, Zero Block и обычные видеоблоки не входят в область действия. Для них нужна отдельная адаптация. Модификация использует текущую разметку и данные каталога Tilda; после обновлений платформы её стоит перепроверять.

Шаг 1. Подготовьте товар
  1. Откройте каталог «Товары» → нужный товар → его галерею.
  2. У изображения, которое должно служить обложкой, укажите ссылку на видео в поле для видео. Сохраните товар. Для VK это может быть ссылка вида https://vkvideo.ru/clip-123_456 или https://vkvideo.ru/video-123_456.
  3. На отдельной странице добавьте ST205 и свяжите его с товаром через ID. Убедитесь, что галерея товара загрузилась.

Режим своего MP4 тоже использует изображения, к которым в каталоге привязано видео. Он не превращает все фотографии в видео и не создаёт новый слайд.

Шаг 2. Настройте и скопируйте код
  1. Выберите автозапуск, интерфейс и размер. Чтобы полностью скрыть интерфейс, выберите MP4.
  2. Для одного блока укажите его #rec…. Для всех ST205 оставьте первый вариант.
  3. Нажмите «Скопировать код». Код обновляется при изменении настроек.
Шаг 3. Вставьте в Tilda
  1. Удалите предыдущую версию модификации видео с этой страницы.
  2. Добавьте блок T123 «HTML-код» под ST205.
  3. Вставьте в «Контент» T123 весь сгенерированный код, включая <style> и <script>.
  4. Сохраните и опубликуйте страницу. Откройте опубликованный адрес и переключитесь на слайд с видео.

Для нескольких ST205 достаточно одного T123 с настройкой «Все блоки». Для разных настроек используйте отдельные коды с разными ID блоков. Не подключайте одновременно общий код и код для конкретного блока.

Автозапуск, звук и интерфейс

Автозапуск работает без звука и только на активном видимом слайде. При уходе со слайда, прокрутке видео за пределы экрана или сворачивании вкладки плеер убирается. При возвращении автозапуск начинается заново. Браузер или режим энергосбережения могут ограничить запуск; для MP4 в таком случае остаётся кнопка Play.

Настройка скрытия интерфейса применяется к MP4. Для VK штатные кнопки сохраняются: iframe другого сайта не позволяет надёжно убрать их CSS-кодом. Если скрыли интерфейс MP4 при автозапуске, видео останется без звука; для включения звука оставьте интерфейс видимым.

Если видео не воспроизводится
  • Проверьте страницу после публикации, связь ST205 с каталогом и наличие видео у изображения.
  • Убедитесь, что ролик VK публичный, доступен без входа и разрешает встраивание. Модификация не обходит ограничения VK. В окне VK есть ссылка для открытия исходного видео.
  • Для MP4 используйте публичную прямую HTTPS-ссылку на файл с поддерживаемым браузером кодеком, например H.264 / AAC. Ссылка на страницу облачного диска не подходит.
  • При ошибке MP4 появится сообщение. При запрете автозапуска попробуйте кнопку Play.
Сохрани вкладку в избранном, чтоб не потерять модификацию
Другие модификации:

    Закажите сайт на Тильде «под ключ»

    Давайте создадим что-то значимое вместе
    СВЯЖИТЕСЬ С НАМИ В ЛЮБОМ МЕССЕНДЖЕРЕ
    Мы на связи с понедельника по пятницу с 11:00 до 19:00 по МСК
    ИНН 644910511905
    2026, KETE DESIGN AGENCY – создание сайтов на Tilda