При уменьшении разрешения экрана сквозь видеофон начинает проступать фоновая картинка (в случае, если видеофон не загрузится), и как вообще сделать так, чтобы видеофон стал адаптивным и подстраивался под размер экрана с сохранением пропорций?
Сам сайт:
tempes74.beget.tech
Код:
https://jsfiddle.net/g1txybej/
<section class="relax">
<div class="content">
<div class="intro">
<div class="intro_media">
<video class="intro_media-video" src="video/video_bg.mp4" autoplay muted loop></video>
</div>
<div class="intro_content">
Relax and trust us!
</div>
</div>
</div>
</section>
.intro {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 400px;
}
.intro_media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #ccc url(../img/video_bg.jpg) no-repeat center center;
background-size: cover;
}
.intro_media:before {
position: absolute;
content: '';
top: 0;
left: 0;
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.intro_media-video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.intro_content {
z-index: 10;
font-size: 48px;
color: #fff;
}
Простой
