lite-youtube-embed

Programming - Mar 31, 2024

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 →

Previous Next
Copyrights
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More