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

Question

I have a <video> tag in my HTML, that looks like this:

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

This video is hosted on Cloudinary, and I'm doing an inline transform with the src to get a specific dimension (w_450,h_350).

The video by itself looks fine, however I have a media query where I shrink the video by 100px in both width and height to fit smaller screen sizes

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

And as you can see, the video container has a shadow that overflows past the width and height of the new container size. If I click play on the video, the box shadow persists.

How do I make the box-shadow for the controls fit the actual size of the container?

Answer 1

Rather than applying height width to the tag you should enclose it within a

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

And then apply your css to the

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