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

Posted 2023-03-05

【中文标题】HTML5 视频底部有深色渐变，不适合容器

【英文标题】：HTML5 Video Has Dark Gradient on the Bottom that doesn't fit the container

【发布时间】：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 

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

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

【参考方案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%