Video Hero Component
A responsive hero video component that loads a placeholder image while the video is loading; also allows overlay content.
As both pages below are very light demo pages, I recommend using a throttle of at least Fast 4G, if not Slow 4G.
On a production-grade ecommerce site, this technique can easily improve your LCP by 2-3s or more, and depending on how it is implemented, could also improve your CLS.
Compare live pages:
Or view side-by-side comparison videos:
-
Portrait:
-
Landscape:
Resources
I doubt very much that I am the first person to think about this layout model, but I have documented my process nonetheless: Improving LCP for Video Hero Components
I was heavily influenced by the following articles:
- Scott Jehl's Responsive Video Works Now. These Features Could Make It Work Better.
- Ryan Mulligan's Positioning Overlay Content with CSS Grid