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 чтобы получить заданный размер c (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% }
   }