A quick example of how to use the blending effect "screen" to "mask" a background video. The benefit is search engines can read your text content and you can define hierarchy.
1. The background and the text are in a relative position div/section. With the class text-section
2. The background video clouds-video_background is position absolute to take up the entirety of the space inside of text-mask_wrapper that is created by the text element text-mask_text
3. The blending mode for the text element text-mask_wrapper is set to "screen"
4. The background color for text-mask_wrapper is set to white and the font color is black which is inherited by text-mask_text
5. For faux-masked text elements z-indexes were to be applied to address a display issue on mobile. text-mask_wrapper set a z-index: 1 and clouds-video_background a z-index: 2
Knockout video background text.. More video background text, and a little more background video text
⛅️ Using a .png with transparency and no blending mode
This is a simpler implementation using an image with transparency to effectively cover part of the video.
1. The background and the image are in a relative position div/section. window-section
2. The "mask" image is tiled as a background image of window-mask This was mostly done for performance and to make tiling easy. You could use a standard image element here with the advantage of lazy loading.
3. The scrolling-effect (for drama) is created by setting window-mask to larger than 100vw. Then using scroll based interactions to move the div.