Как применить белый «фильтр» (альфа 50%) к тегу HTML <video>?

Question

Я ищу способ добавить «белый фильтр» поверх HTML, т. Е. В основном я хочу, чтобы видео выглядело как находящееся ниже белого слоя с 50% альфа.

Я обращаюсь к решению css filter, но оно не предоставляет одноцветную опцию поставщика, любая идея?

<video  
    poster="/assets/img/stuff.png"
    autoplay muted loop
    id="background-video">
    <source src="/assets/video/stuff.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

Answer 1

Проверьте это:

* {
  padding: 0;
  margin: 0;
  border: 0;
}
#video_container {
  width: 480px;
  height: 270px;
  position: relative;
  z-index: 0;
}
video {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: royalblue;
  z-index: 0;
}
#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

<div id="video_container">
  <div id="overlay"></div>
  <video  
         poster="/assets/img/stuff.png"
         autoplay muted loop
         id="background-video">
    <source src="/assets/video/stuff.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video><!--about poster attibute you used: https://www.w3schools.com/tags/att_video_poster.asp-->
</div>

Answer 2

Решение:

<div class="overlay">
    <video  
        poster="/assets/img/stuff.png"
        autoplay muted loop
        id="background-video">
        <source src="/assets/video/stuff.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
     </video>
</div>

С

.overlay {
  z-index: 2;
  background: white;
  opacity: 0.5;
}