0

I am trying to make the solid background of a HTML5 video blend in with the background of the page.

I've tried using mix-blend-mode though the vide stays same. Is there a way to do this via CSS?

Here is the jsfiddle (the video background should be gray like the container). I try two approaches (blend mode on the main container and blend mode on a separate, special container for the video.

Here is the code:

<div id="container">

  <video width="320" height="240" controls>
    <source src="https://static.videezy.com/system/resources/previews/000/013/330/original/Thin_Smoke_80_-_4K_res.mp4" type="video/mp4">
  Your browser does not support the video tag.
  </video>
</div>

<div id="container-two">

  <div id="inner-container">



    <video width="320" height="240" controls>
      <source src="https://static.videezy.com/system/resources/previews/000/013/330/original/Thin_Smoke_80_-_4K_res.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
  </div>
</div>

JS

   video{
     mix-blend-mode:multiply;
   }
    #container{
      background-color:gray;
      height:500px;
      width: 100%;
      mix-blend-mode:multiply;
    }
    #container-two{
      background-color:gray;
      height:500px;
      width: 100%;
      mix-blend-mode:multiply;
    }
    #inner-container{
      background-color:gray;
      height:500px;
      width: 100%;
      mix-blend-mode:multiply;
    }
auto
  • 1,062
  • 2
  • 17
  • 41
  • Could you not make the background black as that seems to be the colour of the video you are using, or is it a different video that may be dynamic and change colour? – Max Loyd Aug 01 '19 at 16:28
  • This is just a sample, but the actual project the background color is set in stone, and the video, when rendered, doesn't always match. – auto Aug 01 '19 at 16:32
  • because video is rendered as a discrete object, you're probably going to have to transfer frame by frame to a canvas and apply your blend to that – Offbeatmammal Aug 01 '19 at 22:26
  • Thanks. Is there a downside to using this method, such as load time, speed/performance? – auto Aug 01 '19 at 23:29

0 Answers0