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

【问题标题】：HTML5 Video Has Dark Gradient on the Bottom that doesn't fit the containerHTML5 视频底部有深色渐变，不适合容器
【发布时间】：2020-08-09 02:12:55
【问题描述】：

我的 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 }
}

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

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

【问题讨论】：

标签： html css video cloudinary

【解决方案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% }
   }

【讨论】：