Как сделать фон видео адаптивным?

Question

[Norum]

При уменьшении разрешения экрана сквозь видеофон начинает проступать фоновая картинка (в случае, если видеофон не загрузится), и как вообще сделать так, чтобы видеофон стал адаптивным и подстраивался под размер экрана с сохранением пропорций?

Сам сайт: 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;
}

Comments

[Михаил]

Гуглите css aspect-ratio
Вариант с padding-top

Answer 1

[Дмитрий Гоголенко]