How to put video in text background, if background nor white nor black?
Hey guys! I know how to put images in text background using background-clip: text and color: transparent.
I know how to put video in text background, using mix-blend-mode, but it only works if body color is black or white. Are there any ways to achieve that in colour background or even gradient background? I though about using text as svg and do clip-path, but i don't know how to convert text to svg on demand inside react app. So any suggestions are welcome!
https://codepen.io/RobyDoby/pen/pomPZrR
5 Replies
Found this. Could it be what you're looking for? https://codepen.io/dudleystorey/pen/ZpYEyO
Dudley Storey
CodePen
Fullscreen Background Video with Mix-Blend-Mode Overlay Text
Shows full-screen video with effective, legible text overlay using mix-blend-mode, inspired by work at [Everlane](https://ca.everlane.com/modern-oxford...
maybe something like this
https://codepen.io/MarkBoots/pen/bGyWmwm
This is obvious, but it uses white background, my app has grayish and video becoming visible
nope, video shouldn't be visible outside the text
I suspect that the SVG method you mentioned is the way to go.
I don't know enough about React but what would be the complication of adding the text to the SVG within a React app?
Surely it is just a question of changing the text as with any other parameter?
https://codepen.io/cbolson/pen/gOJRYge