Remove or blend background of video using CSS? - 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;
}