Lazy load embedded YouTube videos

This ingenious method, conceived by Arthur Corenzan, offers a significant improvement over standard YouTube embeds. Instead of loading substantial resources regardless of user interaction, it employs a small placeholder image linked to the YouTube embed. Clicking the image initiates the video playback seamlessly.

Functionality remains virtually unchanged; a simple click plays the video in its designated space.

The key lies in the <iframe></iframe> tag's srcdoc attribute. This attribute allows embedding an entire HTML document directly within the tag, similar to inline styling but for entire documents. This technique has proven useful for embedding content like MailChimp newsletters.

Arthur acknowledges Remy's contribution for IE 11 compatibility and Adrian's accessibility enhancements.

Hugh's suggestion in the comments is also noteworthy. Given Chrome's native lazy loading support, adding loading="lazy" further optimizes performance, preventing any requests if the video is outside the viewport.

Here's a demonstration:

A reader, Tracey Rich, suggested using ► instead of the Unicode play button for improved clarity.

The above is the detailed content of Lazy load embedded YouTube videos. For more information, please follow other related articles on the PHP Chinese website!