August 20th, 2019
This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed.
It still behaves essentially exactly the same: click, play video in place.
The trick is rooted in
srcdoc, a feature of
<iframe> where you can put the entire contents of an HTML document in the attribute. It’s like inline styling but an inline-entire-documenting sort of thing. I’ve used it in the past when I embedded MailChimp-created newsletters on this site. I’d save the email into the database as a complete HTML document, retrieve it as needed, and chuck it into an
I also agree with Hugh in the comments of that post. Now that native lazy loading has dropped in Chrome (see our coverage) we might as well slap
loading="lazy" on there too, as that will mean no requests at all if it renders out of viewport.
I’ll embed a demo here too: