HTML5 视频底部有深色渐变，不适合容器

Question

我的 HTML 中有一个 <video> 标签，它看起来像这样：

<video control>
    <source src="[video_url].webm" type="video/webm">
    <source src="[video_url].mp4" type="video/mp4">
    <p>Your browser does not support this type of video</p>
</video>

此视频托管在 Cloudinary 上，我正在使用 src 进行内联转换以获得特定维度 (w_450,h_350)。

视频本身看起来不错，但是我有一个媒体查询，我将视频的宽度和高度都缩小了 100 像素以适应较小的屏幕尺寸

@media screen and (max-width: 1000px) {
    video { width: 350px; height: 250px }
}

如您所见，视频容器的阴影超出了新容器大小的宽度和高度。如果我点击播放视频，盒子阴影仍然存在。

如何使控件的框阴影适合容器的实际大小？

Answer 1

与其将高度宽度应用于标签，不如将其包含在

   <div>
       <video control>
           <source src="[video_url].webm" type="video/webm">
           <source src="[video_url].mp4" type="video/mp4">
           <p>Your browser does not support this type of video</p>
       </video>
   </div>

然后将您的 css 应用到

   @media screen and (max-width: 1000px) 
   {
       div{ width: 350px; height: 250px }
       video{ width: 100%; height: 100% }
   }

HTML5 视频底部有深色渐变，不适合容器

HTML5 Video Has Dark Gradient on the Bottom that doesn't fit the container

html

css

video

cloudinary