Recently I saw an implementation on Apple Site , where a transparent text is placed over the video. It will look like as show below:
Here i am sharing my experience on recreating the above feature.You can find the working code-pen here
Logic: The logic which i used here is to keep a canvas above the video and draw the video on the canvas.Then use the clip-path and filter CSS property together to make the text transparent.
Step1: Setup the HTML. It will have a video section, canvas section and svg section.
Step2: Apply the CSS as in the codepen. The few key CSS features which we are using is filter and clip-path. The filter property defines visual effects (like blur and saturation) to an element. The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area.
That’s it! here goes the developed preview.
Try it and let me know if you guys face any issues, Happy to help