На странице два элемента, нужно чтобы они оба показывали одно видео на фоне. Я попробовал обрезать видео на два куска для каждого элемента. Подставил размеры, все работает нормально, но когда меняю размеры видео деформируется, что логично. Есть ли универсальный способ исправить css так, чтобы не деформировалось, или все таки придется делать с помощью media? Надеюсь, я просто затупил немного. Всем заранее спасибо за ответ.
Вот так выглядит html:
<div class="wrapper">
<div class="left">
<video class="bg-video">
<source class="bg-video-content" src="img/Comp_2.mp4" type="video/mp4">
<source src="img/Comp_2.webm" type="video/webm">
Your browser is not supported!
</video>
</div>
<div class="right">
<video class="bg-video">
<source class="bg-video-content" src="img/Comp_2.mp4" type="video/mp4">
<source src="img/Comp_2.webm" type="video/webm">
Your browser is not supported!
</video>
</div>
</div>
В стилях:
.bg-video {
position: absolute;
height: 100%;
width: 100%;
z-index: -2;
overflow: hidden;
}
.bg-video-content {
position: relative;
width: 100%;
object-fit: cover;
}
Простой
