I was wondering if there's a way to overlay a video over an image, but choosing how to blend them together. As a reference, both Photoshop and Final Cut offer a lot of blending modes, like Overlay, Multiply, Add, and so on.
Maybe there's some library that can do this?
There are also some overlay effects in css, see mdn. I add an example, you can alter the mix-blend-mode to any of overlay, screen, etc.
.container {
background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
background-repeat: no-repeat;
}
#effet {
mix-blend-mode: difference;
}<div class="container">
<video id="effet" autoplay loop width="100%">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>
</div>