Full height video in safari/firefox

Question

does anybody know why the video html tag isn't covering 100% height in safari and firefox ? It works in chrome and edge. I need the video to cover 100% height of it's parent element, hope someone can help.

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>

The video has its height set to `auto`: how will that ever cover 100% of the container height? — Terry, Mar 16 '20 at 15:59
Does this answer your question? [Safari html5 video fullscreen size](https://stackoverflow.com/questions/27452624/safari-html5-video-fullscreen-size) — Oddrigue, Mar 16 '20 at 16:13
Since you accepted an answer, I'll follow up with why `100%` height doesn't work. The parent element needs a height set for that to work, otherwise there is no reference to what 100% should be. — disinfor, Mar 16 '20 at 16:14

score 0 · Accepted Answer · answered Mar 16 '20 at 16:10

0

Change your .video with following :

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

answered Mar 16 '20 at 16:10

quarantina

111
7

Fantastic, that did it :) – hb8 Mar 16 '20 at 16:13

score 0 · Answer 2 · answered Mar 16 '20 at 16:33

Try This

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>

score 0 · Answer 3 · answered Jul 15 '22 at 18:48

I was having this issue today, and found that, in my specific use case (which was an absolutely-positioned video that should display 100vw and 100vh), it was Safari user agent's default object-fit: contain on the <video> element that cause the video to not display full height. Adding object-fit: cover corrected it in this situation.

Full height video in safari/firefox

3 Answers3