Видео в полный рост в сафари / firefox

Question

Кто-нибудь знает, почему тег видео html не покрывает 100% высоты в сафари и firefox? Работает в chrome и на краю. Мне нужно, чтобы видео покрывало 100% высоты его родительского элемента, надеюсь, кто-то может помочь.

body {
  margin: 0;
}

.clearfix {
  overflow: auto;
}

.video_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  position: relative;
  align-items: center;
  color: #fff;
  height: 1440px;
  background-color: rgba(32, 32, 177, 0.55);
  text-align: center;
}

.video {
  width: 100%;
  position: fixed;
  height: auto;
  z-index: 0;
}

<div class="section">
  <video class="video" muted="" loop="" autoplay="" playsinline style="">
		<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
	</video>

  <div class="video_content">
    <h1>HELLO WORLD</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dumm</p>
  </div>
</div>

Answer 1

Попробуйте

1002 *

body {
  margin: 0;
}

.clearfix {
  overflow: auto;
}

.video_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  position: relative;
  align-items: center;
  color: #fff;
  height: 1440px;
  background-color: rgba(32, 32, 177, 0.55);
  text-align: center;
}

.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

<div class="section">
  <video class="video" muted="" loop="" autoplay="" playsinline style="">
		<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
	</video>

  <div class="video_content">
    <h1>HELLO WORLD</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dumm</p>
  </div>
</div>

Answer 2

Измените .видео со следующими:

.video {
  min-width: 100%;
  min-height: 100vh;
  position: fixed;
  z-index: 0;
}