Search code examples
htmlcssmasking

Applying a png mask on a video html/css

I am having some issues applying a PNG mask onto a MP4 file. Not sure where i am going wrong with this.

The html goes like

<html>
<body>
    <video id="wee" autoplay src="dosebotdesigns.com/smoke.mp4">
</body>
</html>

and the css reads,

#wee {
  mask-image: url(dosebotdesigns.com/test4.png);
}

Feel free to check this JSFiddle: https://jsfiddle.net/tyd8wggr/

My main goal is to have the png mask the smoke video. Thanks for your time!

Solution

  • It should be -webkit-mask-image for it to work on chrome, but it only works in certain browsers right now.