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>