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