коды
вставка видео в zero-block
  1. Оптимизируй mp4 через сервисы сжатия (например, videosmaller.com)
  2. Загрузи видео на один из доступных тебе хостингов.
  3. Скопируй код ниже, заменив там ссылку на свою.
  4. При необходимости дублируй блок с видео для мобильной версии сайта, заменив файл на сервере и ссылку на видео, соответственно.
  5. Настрой вид окна с видео: круглые углы, положение видео в окне, обводка и т.д.
<style>
.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
  overflow: hidden;
}

.page__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
</style>

<div class="video-wrapper">
  <video class="page__video" preload="auto" playsinline autoplay loop muted>
    <source src="one-does-not-simply.webm" type="video/webm">
    <source src="ССЫЛКА НА ВАШЕ ВИДЕО" type="video/mp4">
  </video>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  let video = document.querySelector('.page__video');
  video.pause();
  video.currentTime = 0;

  setTimeout(() => {
    video.play().catch(e => console.log('Ошибка воспроизведения:', e));
  }, 50);
});
</script>
видео с панелью управления
<style>
 .page__video {width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
 
</style>

<video class="page__video" preload="auto" playsinline controls="controls">
  <source src="https://static.marinalooo.ru/LoooSite/home/myshow.mp4" type="video/mp4">
</video>
Вставка gif
  1. В figma подготовь картинки, экспортируй.
  2. Сожми их, например, через tinypng.com
  3. Загрузи их на ezgif.com
  4. Конвертни формат gif в webp
  5. Вставь результат на сайт с помощью кода ниже (при необходимости редактируй стили в коде).
<style>
.gif2 {
     width: 100%;
     height: auto;
     border-radius: 10px;
     display: flex;
     pointer-events: none;
}
</style>

<picture>
  <source srcset="https://static.marinalooo.ru/cases/mrkt.webp" type="image/webp" /> 
  <img class="gif2" src="https://static.marinalooo.ru/cases/mrkt.webp" width="100" height="100" loading="lazy" decoding="async"> 
</picture>
Вставка видео в webm
  1. Оптимизируй mp4 через сервисы сжатия (например, videosmaller.com)
  2. Конвертни видео в формат webm (например, через file-converter-online.com)
  3. Загрузи видео на один из доступных тебе хостингов.
  4. Скопируй код ниже, заменив там ссылку на свою.
  5. При необходимости дублируй блок с видео для мобильной версии сайта, заменив файл на сервере и ссылку на видео, соответственно.
  6. Настрой вид окна с видео: круглые углы, положение видео в окне, обводка и т.д.
<video class="page__video" autoplay muted loop playsinline poster="https://static.marinalooo.ru/sushareshaet/sushaprew.jpg" style="width: 100%; height: auto; border-radius: 20px">
  <source src="https://static.marinalooo.ru/sushareshaet/sushareshaet.webm" type="video/webm">
  <source src="https://static.marinalooo.ru/sushareshaet/sushareshaet.mp4" type="video/mp4">
</video>

<style>

.showreel {
  display: block;
  overflow: hidden;
  border-radius: 20px;
}
</style>
Вставка фото в webp
  1. Сожми картинку через сервисы сжатия (например, squoosh.app)
  2. Конвертни ее в формат webp.
  3. Загрузи видео на один из доступных тебе хостингов.
  4. Скопируй код ниже, заменив там ссылку на свою.
  5. Поставь шейп в блоке и задай ему css-класс.
  6. Замени в коде ниже ссылку на свою картинку и класс шейпа.
<style>
    .pic1 .tn-atom {
        background-image: url('https://static.marinalooo.ru/sushareshaet/pic1.webp');
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .pic1::before {
    z-index: 1;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;   
}


</style>
Прелоадер
  1. Подготовь видео/gif для блока и загрузи их в блок с помощью кода (коды и инструкции для загрузки видео и gif есть в других вкладках).
  2. Настрой анимацию элементам внутри блока, если это необходимо.
  3. Поставь блок T-123 и скопируй в него код ниже, заменив ID-блока и длительность прелоадера на свои значения.
<style>
#rec389879844 {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100005;
}
</style>
<script>
$("body").css("overflow","hidden");
$(document).ready(function() {
setTimeout(function() {
$("#rec389879844").delay(6000).fadeOut('slow');
$("body").css("overflow","auto");
window.dispatchEvent(new Event('resize'));
}, 6000);
});
$(window).on('load', function () {
$("#rec389879844").delay(6000).fadeOut('slow');
setTimeout(function() {
$("body").css("overflow","auto");
window.dispatchEvent(new Event('resize'));
}, 400);
});
</script>
Made on
Tilda