July 17

Как в Tilda добавить обложку для mp4-видео с сервера

Я решил перестать использовать Ютуб и РуТуб для видосов на сайтах. Первый уже не всем доступен, а второй гонит адское количество рекламы. У меня видосы лежат на обычном сервере, так как трафик не очень высокий.

Но не все блоки Тильды с видосами позволяют ставить обложки, из-за этого на привью показывается только первый кадр. Ниже код, который ищет mp4 из списка и подставляет для них одноименные jpg в качестве обложки.

<script>
function replaceVideoPosters() {
  // Список видео для замены
  const targetVideos = [
    'https://docs.atoevents.ru/email/video/2025/airtravelsochi/aitravelsochi-report24_v2.mp4',
    'https://docs.atoevents.ru/email/video/2025/airtravelsochi/aitravelsochi24_batanov.mp4'
  ];

  // Ищем все блоки (включая те, что могут появиться позже)
  const blocks = document.querySelectorAll('.t1061__wrap-video');

  blocks.forEach(block => {
    const video = block.querySelector('.t-video-lazyload video');
    if (!video) return;

    const source = video.querySelector('source');
    if (!source || !source.src) return;

    // Проверяем, есть ли видео в списке для замены
    const matchedVideo = targetVideos.find(url => source.src.includes(url));
    if (!matchedVideo) return;

    // Заменяем постер
    const posterUrl = source.src.replace('.mp4', '.jpg');
    video.setAttribute('poster', posterUrl);
    console.log('Постер заменен для:', source.src);
  });
}

// Запускаем сразу при загрузке
document.addEventListener('DOMContentLoaded', replaceVideoPosters);

// И на случай динамической подгрузки
new MutationObserver(replaceVideoPosters).observe(document.body, {
  childList: true,
  subtree: true
});
</script>

Код желательно поставить внизу сайта