Lazy load embedded YouTube videos (CSS-Tricks)

Direct Link

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.

Here’s a performance-enhancing trick for embedding youtube videos which eschews the default YouTube embed (and all the resources it adds to a page whether the video plays or not) in favour of rendering a tiny placeholder webpage in the srcdoc attribute.

Importantly, the user experience with the video remains the same.

External Link Bookmark Note Entry Search