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）。

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

@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% }
   }