Видео внутри шейпа с тёмным градиентом сверху и снизу — текст поверх видео читается лучше.
video_zero_block.<!--Видео на сайт-->
<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>