html - 元素未填充到容器中？

Question

我有一个 div 作为视频元素的容器，我希望视频元素填充整个容器，为此我将 div 的背景色设置为黑色，高度和视频的宽度为 100%。 我仍然看到黑色，如何让视频填满整个容器？ 它会填满整个宽度，但不会填满整个高度。

#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>

Answer 1

根据评论，下面将使视频填充包含的 div。

如果您想让视频适合用户屏幕，请查看此相关帖子 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>