Where alpha is a requirement, this is very clever.
However, in many cases, the requirement isn't actually transparency, the requirement is a video background seamless with the containing page.
With most pages white or off-white, this can be done at production. Even responsive dark mode can be done in production if two clips are made.
We used this simpler technique for borderless animated video (e.g., a streaming video spokesperson walking across your e-commerce product page) 20 years ago.
The optical illusion of borderless transparency works so surprisingly well it's unbelievable it's not seen widely.
That certainly works but it’s a pretty big limitation. When catering with dynamic viewports on the web you’re really going to struggle to line everything up if you absolutely anything in the background, providing an alpha channel really is a much easier alternative.
The canonical way to handle responsive videos is to embed multiple source elements within the video element, and them use the media attribute to respond to the user's viewport size, and preferred color scheme: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/so...
It gets worse, it's not just video rendering - Chrome (used to?) use a different color profile than all other browsers, making the same CSS values brighter than the other browsers. It was different enough that our designer could see something was wrong just glancing at my Firefox window while walking past behind me.
I can't find the original bug report (this was around 2018 and it was already pretty old, like 5+ years), but at the time they were refusing to fix it even though the choice of color profile went against the CSS spec.
Edit: Because Chromium, not Chrome. Came right up just switching to that, the bug report was from 2010, and from the recent comments looks like it's still an issue:
Hard agree, and you’d think white and black would work best, but then there’s the legacy black levels / white levels thing alluded to at the end of OP’s article...
However, in many cases, the requirement isn't actually transparency, the requirement is a video background seamless with the containing page.
With most pages white or off-white, this can be done at production. Even responsive dark mode can be done in production if two clips are made.
We used this simpler technique for borderless animated video (e.g., a streaming video spokesperson walking across your e-commerce product page) 20 years ago.
The optical illusion of borderless transparency works so surprisingly well it's unbelievable it's not seen widely.