Контроль в html5 ВИДЕО, изменение макета

Question

У меня небольшая проблема с элементом видео HTML5.

Без "Controls" у него есть радиус границы, как я его установил.

Но, когда я добавляю контроль (и он мне нужен) - он дает мне эту уродливую границу и не видит границы, установленного мной. Может быть, кто-то знает, как я могу достичь этого «контроля» и изменить его? Или, может быть, у нас есть некоторые правила для этого?

Вы просили код, вот и вы:

<div class="header__video">
   <video src="images/our.mp4" controls type="video/mp4" autoplay="false" preload="none">

   </video>
</div>

video{
    height: 30rem;
    border-radius: 50px;
    outline: none;
    border: none;
}

.header__video - просто гибкий контейнер.

Answer 1

Это не так сложно, просто добавьте еще один контейнер вокруг него, установите border-radius на 50px и overflow: hidden

<div class="header__video">
   <div class="video-container">
       <video src="images/our.mp4" controls="controls" type="video/mp4" autoplay="false" preload="none"></video>
   </div>
</div>

CSS

video {
    height: 30rem;
    outline: none;
}

.video-container {
    overflow: hidden;
    border-radius: 50px;
}