A standard copy-and-paste YouTube embed lands on your page as an <iframe> which loads a big ol' pile of other stuff to play that video. But the UX of it is still essentially an image and a play button. Click the play button and the video plays. You can build essentially the same thing with an anchor link wrapping an image!
Not long ago, we covered a very clever "lazy load" technique doing exactly this from Arthur Corenzan that was further improved by Remy Sharp and Adrian Roselli.
Paul Irish has tackled it as well with a <lite-youtube> web component:
Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster.
In the source code, Paul dug up some other prior attempts as well, like this jQuery plugin and a more generic script for lazy loading any iframe.
Direct Link to Article — Permalink
The post lite-youtube-embed appeared first on CSS-Tricks.
from CSS-Tricks https://ift.tt/33eIHkb
via IFTTT
No comments:
Post a Comment