Attempting to utilize mix-blend-mode with an mp4 playing in the background has been a fun experiment. The concept is to have a div containing some text, with the video playing in the background to create an effect on the letters. This method works flawlessly with all browsers except for Firefox.
In Firefox, the video plays in the background but mix-blend-mode doesn't seem to have any impact. The text just remains black. The strange part is that if I open the inspector, the animations kick in but only once. I initially thought it might be a permission issue, so I allowed autoplay, but that didn't resolve the issue. I haven't been able to pinpoint the cause of this bug. Any suggestions or hacks would be greatly appreciated :)
I have shared the code on GitHub and it's live on Netlify. You can find the repository on GitHub and the live version on Netlify for a closer look.
Here is a snippet of the HTML code:
function App() {
return (
<div className="scroll-container">
<video className="background-video" autoPlay="autoplay" muted loop>
<source src={video} type="video/mp4" />
</video>
<div className="wrapper">
<div className="header">
THE CREATIVE
<br />
WEB AGENCY
<br />
DESIGN/CODE
</div>
</div>
</div>
);
}
And here is the CSS code:
.text {
overflow-y: scroll;
overflow-x: hidden;
background: rgb(255, 255, 255);
color: black;
z-index: 1;
mix-blend-mode: screen;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
mix-blend-mode: screen;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}