Модификации

Как вставить видео вместо первой картинки в попап карточки товара на Tilda

2025-08-07 05:02 Видео Pop-up

Инструкция

Код позволяет вывести ваше видео (YouTube или VK) вместо первой картинки в попапе карточки товара в стандартных блоках Tilda (ST505, ST510, ST500). Это помогает привлечь внимание к товару через видео-презентацию или инструкцию. Видео будет появляться сразу при открытии попапа, можно настроить автозапуск.
  1. Скопируйте код модификации и вставьте его на странице Тильды выше блока попапа (в блок T123). Код обязательно нужно поставить выше попапа.
  2. Замените в начале кода две цифры 1 207 295 986 на ID вашего попапа (без префикса rec). Например, если у вашего попапа ID rec123456789, то вписываем 123 456 789.
  3. Замените #rec1207295986 на ID блока вашего попапа (например, #rec123456789).
  4. Замените ссылку на видео на свою, для этого в коде модицикации найдите строку src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=v_4fxGXqCCFIWEWd" и вставьте свой URL.
  5. Опубликуйте изменения.


Как получить код для встраивания видео:
  • Для YouTube: нажмите под видео «Поделиться» → «Встроить» и скопируйте ссылку формата www.youtube.com/embed/…
  • Для VK: под видео нажмите «Поделиться» → скопируйте URL

Автозапуск видео:

  • Если в конец ссылки добавить &autoplay=1 — видео запустится автоматически.
  • Если в конец ссылки добавить &autoplay=0 — видео не будет запускаться автоматически.

<!-- Скрипт для вставки видео вместо фото в попапе товара Tilda с сайта bulgkate.ru -->

<script>
  (function() {
    // Нужно заменить 1207295986 дважды на ID попапа без rec
    var origGet = localStorage.getItem;
    localStorage.getItem = function(key) {
      if (key === 'tilda-slds-index-1207295986') return "0";
      return origGet.apply(this, arguments);
    };
    var origGet2 = sessionStorage.getItem;
    sessionStorage.getItem = function(key) {
      if (key === 'tilda-slds-index-1207295986') return "0";
      return origGet2.apply(this, arguments);
    };
  })();
  document.addEventListener('DOMContentLoaded', function() {
    var rec = document.querySelector('#rec1207295986'); // Нужно заменить на ID попапа с rec
    if (!rec) return;
    var sliderWrapper = rec.querySelector('.t-slds__items-wrapper');
    if (!sliderWrapper) return;
    var videoSlide = document.createElement('div');
    videoSlide.className = 't-slds__item t-slds__item-loaded';
    videoSlide.setAttribute('data-slide-index', '0');
    // Сюда нужно вставить ссылку на встраиваемое видео в src
    videoSlide.innerHTML =
      `<div class="t-slds__wrapper" itemscope itemtype="http://schema.org/VideoObject">
      <meta itemprop="video">
      <div class="t-slds__video-wrapper" style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
        <iframe 
          src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=v_4fxGXqCCFIWEWd"      
          frameborder="0"
          allow="autoplay; encrypted-media; picture-in-picture"
          allowfullscreen 
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
        </iframe>
      </div>
    </div>`;
    sliderWrapper.insertBefore(videoSlide, sliderWrapper.firstChild);
    var slides = sliderWrapper.querySelectorAll('.t-slds__item');
    slides.forEach(function(slide, index) {
      slide.setAttribute('data-slide-index', index);
    });
    sliderWrapper.setAttribute('data-slider-totalslides', slides.length);
    var thumbsWrapper = rec.querySelector('.t-slds__thumbsbullet-wrapper');
    if (thumbsWrapper) {
      var videoThumb = document.createElement('div');
      videoThumb.className = 't-slds__thumbsbullet t-slds__bullet';
      videoThumb.setAttribute('data-slide-bullet-for', '0');
      // Можно изменить внешний вид превью для блока ST510
      videoThumb.innerHTML =
        `<div class="t-slds__bgimg" 
           style="background:#03A3FF; aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center;">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 5v14l11-7z"/>
        </svg>
      </div>
      <div class="t-slds__thumbsbullet-border"></div>`;
      thumbsWrapper.insertBefore(videoThumb, thumbsWrapper.firstChild);
      thumbsWrapper.querySelectorAll('.t-slds__thumbsbullet').forEach(function(thumb, index) {
        thumb.setAttribute('data-slide-bullet-for', index);
      });
      thumbsWrapper.querySelectorAll('.t-slds__thumbsbullet').forEach(function(thumb) {
        thumb.classList.remove('t-slds__bullet_active');
      });
      thumbsWrapper.querySelector('[data-slide-bullet-for="0"]').classList.add('t-slds__bullet_active');
    }
    var iframe = videoSlide.querySelector('iframe');

    function reloadIframe() {
      const originalSrc = iframe.src;
      iframe.src = '';
      setTimeout(() => {
        iframe.src = originalSrc;
      }, 500);
    }
    let errorCount = 0;
    iframe.addEventListener('error', () => {
      errorCount++;
      if (errorCount <= 2) {
        reloadIframe();
      } else {
        iframe.parentElement.innerHTML =
          `<div style="color: white; text-align: center; background: black; padding: 20px;">
          Видео временно недоступно.<br>
          <button style="margin-top:10px; padding:8px 16px; cursor:pointer;" onclick="location.reload()">Обновить страницу</button>
        </div>`;
      }
    });
    setTimeout(function() {
      var firstBullet = rec.querySelector('.t-slds__thumbsbullet[data-slide-bullet-for="0"]');
      if (firstBullet) {
        firstBullet.click();
      } else {
        var slides = sliderWrapper.querySelectorAll('.t-slds__item');
        slides.forEach(function(slide, index) {
          slide.classList.remove('t-slds__item_active');
          slide.setAttribute('aria-hidden', 'true');
        });
        if (slides[0]) {
          slides[0].classList.add('t-slds__item_active');
          slides[0].setAttribute('aria-hidden', 'false');
        }
      }
    }, 200);
  });
</script>