Fill a video to the entire height and width of the screen height and width

Question

Problem :

• Trying to fill the entire screens height and width with a video, but I can not understand why the video is not filling the entire container I wrap around it.

• I have a video container <div> that is wrapped around the <video> with the following styling:

Code :

 videoContainer: {
       height: '100vh'
    },
    video: {
       objectFit: 'cover'
    }

Answer 1

.videoElem {
    position: absolute;
    width: 100%
}
.wrapper {
    width: 600px;
    height: 400px;
    position: relative;
}

<div class="wrapper">
  <video autoplay muted loop id="myVideo">
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" 
type="video/mp4">
  </video>
</div>

Answer 2

This could also be a solution to your issue!

html.body {
  margin: 0px;
  height: 100%;
  width: 100%;
  position:relative;
}

video {
  height: 100vh;
  width: 100vw;
  object-fit: fill;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

<video autobuffer controls autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Answer 3

Try this out! Click 'Run code snippet', then 'Full page'.

#myVideo {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100vw; 
    min-height: 100vh;
}

<video autoplay muted loop id="myVideo">
  <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>