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>