Remove or blend background of video using CSS?

Question

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