您可以尝试此代码以获得更精确的结果。

HTML`

<div class="container1">
    <div class="video-container">
        <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1" onclick="controlsChangeVideo1"></video>
    </div>
</div>

字符串
`

CSS`

.container1 {
    margin-left: 50px;
    margin-right: 425px;
    margin-top: 50px;
}

.video-container {
    border-radius: 20px;
    overflow: hidden;
}

.video1 {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px; /* Adjust this value as needed */
}

型
`

这是因为容器的大小实际上与视频的大小不匹配。要使容器与视频播放器的大小匹配，您可以使用min-content。
但是，如果您为容器添加边框，您会注意到视频下方有额外的空间。这是因为video默认为inline显示，导致基于line-height的额外空间。建议删除此空间的方法是使视频display:block。

的数据

.container1 {
  margin-left: 50px;
  margin-right: 425px;
  margin-top: 50px;
  border-radius: 20px;
  overflow: hidden;
  /* add the following lines*/
  width: min-content;
  height: min-content;
}

video {
  display: block;
}

字符串