Element not filling in container?

Question

I have a div as a container for a video element, I want the video element to fill the entire container, to do this I set the background color of the div to black and the height and width of the video to 100%. I am still seeing black, how do I get the video to fill the entire container? It fills the entire width, but not the height.

#videoContainer{

width: 600px;
height: 600px;
background-color: black;

}

#video{


  width: 100%;
  height: 100%;

}

<div id ="videoContainer">
 <video  id="video">

    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">

 </video>
</div>

videos are usually a ratio in this case the video is a 4:3 ratio and you are trying to fit it into a 1:1 ratio which will not work. You can try using object-fit https://www.w3schools.com/css/css3_object-fit.asp this however will crop some of the video and has partial support https://caniuse.com/#feat=object-fit — Ginger Wizard, Feb 18 '19 at 07:28
Or you should set only one of height and width. So, that the un-mentioned can scale to the child element's(in your case: image) size. — YetAnotherBot, Feb 18 '19 at 08:19
@GingerCSSWizard So how does YouTube do it then? When I inspect the page of a YouTube video, the video fills the entire `div` YouTube put the video element in? — user987938, Feb 18 '19 at 17:58
@user987938 Youtube does it by letting the video determine the height and not forcing fixed values on the containing div. Also you will notice that youtube videos usually when in cinema mode have black borders. The standard aspect ratio for youtube videos is 16:9 and the majority of screens nowadays are 16:9 so the video fits nicely when in fullscreen mode. — Ginger Wizard, Feb 18 '19 at 18:20
@GingerCSSWizard So if I want to do it like YouTube does it, I just need to omit the `height` from the `video` id? — user987938, Feb 18 '19 at 18:36

score 0 · Answer 1 · answered Feb 18 '19 at 08:09

0

over-ride the default object-fit css property from contain to cover

#videoContainer{
    width: 600px;
    height: 600px;
    background-color: black;
}
#video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div id ="videoContainer">
  <video id="video">
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  </video>
</div>

answered Feb 18 '19 at 08:09

random

7,756
3
19
25

This makes the video element spill out of the div – user987938 Feb 18 '19 at 18:00

score 0 · Accepted Answer · answered Feb 18 '19 at 19:11

Based on the comments the below will make the video fill the containing div.

If you are looking to make the video fit the users screen take a look at this related post Is there a way to make HTML5 video fullscreen?

html,
body {
  margin: 0;
}

#videoContainer {
  width: 600px;
  margin: 0 auto;
  background-color: black;
}

#video {
  width: 100%;
  height: 100%;
  display: block;
}

<div id="videoContainer">
  <video id="video">
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  </video>
</div>

Element not filling in container?

2 Answers2