Что делает скрипт

Видео внутри шейпа с тёмным градиентом сверху и снизу — текст поверх видео читается лучше.

Как подключить

  1. Шейпу задайте класс video_zero_block.
  2. Замените ссылку на видео на свою.
  3. Вставьте код в блок T123 «HTML-код» на страницу (или в «Настройки страницы» → «HTML-код для вставки внутрь head»).
  4. Опубликуйте страницу: код выполняется только на опубликованной странице.

Код

Код для вставки
<!--Видео на сайт-->
<video preload="auto" class="video_source_block" playsinline autoplay loop muted>
    <!--Укажите здесь свою ссылку на видеофайл-->
    <source src="https://dl.dropboxusercontent.com/scl/fi/2r9cacm6gx4q6pxc5uybr/0108-1.mp4?rlkey=x9e9r7l73favatvp7w9dpbml1&dl=0">
</video>

<script>
    $(document).ready(function(){
    $('.video_source_block').appendTo('.video_zero_block div');
});
</script>

<style>

/*.video_zero_block {
    position: relative;
    --squircle-radius: 24px; /* Радиус скругления углов */
    --squircle-smooth: 1;   /* Плавность скруглений, где 0 - это скошенные углы 
    mask-image: paint(squircle);
    -webkit-mask-image: paint(squircle);
}

*/

.video_zero_block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   background-image: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.6041010154061625) 100%);
    z-index: 1;
}

.video_zero_block video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px; /* Радиус скругления углов у видео */
    z-index: 0;
}


</style>
тут нужно написать стили и js/css для того, чтобы отображались файлы скриптов