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

将默认的object-fit css属性从contain覆盖到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>

Answer 2

根据评论，以下内容将使视频充满所包含的div。

如果您要使视频适合用户屏幕，请查看此相关帖子Is there a way to make HTML5 video fullscreen?

const bg = document.querySelector(".bg");
const circles = document.querySelectorAll(".circle");

circles.forEach(circle => circle.addEventListener("mouseenter", (e) => {
  const style = getComputedStyle(e.target);
  const backgroundColor = style.backgroundColor;

  bg.style.backgroundColor = backgroundColor;
}))

html,
body {
  margin: 0;
}

#videoContainer {
  width: 600px;
  margin: 0 auto;
  background-color: black;
}

#video {
  width: 100%;
  height: 100%;
  display: block;
}

元素未填充到容器中？

2 个答案: