Click-to-Load YouTube Videos
What it helps you do
Add as many YouTube videos to a page as you like without slowing it down. Each video shows its YouTube thumbnail and a play button. The YouTube player loads only when a visitor presses play, and then the video starts right away.
A YouTube player is heavy: each one loads about half a megabyte before anyone presses play. On a page of videos, that can add several megabytes and make the page feel slow on phones. With click-to-load, visitors only download the thumbnails until they choose a video.
Where it applies
It works on its own, with nothing to turn on. It covers:
- Embed blocks with a YouTube link, including the videos in a Video Gallery.
- Grid cards set to YouTube.
- YouTube embed code pasted into a Custom HTML block.
- YouTube links and embed code in older posts written in the classic editor.
- YouTube embed code in plugin text fields (rich text and plain text areas), such as a dog's or a listing's description.
- Single videos, videos with a start time, and playlists.
What visitors see
- The video's thumbnail, in exactly the space the player takes up, with a red play button.
- Pressing play (click, tap, or Enter or Space on the keyboard) swaps in the player, and the video starts playing.
- Screen readers announce the button as "Play:" followed by the video's title (for Grid cards, the card's headline).
- Privacy: until a visitor presses play, the page loads only your site's own files. The thumbnail is a copy your site keeps, so the visitor's browser contacts no YouTube or Google server. After they press play, the video plays in YouTube's privacy-enhanced player (youtube-nocookie.com).
Things to know
- Background videos are left alone. A YouTube video set to autoplay (for example muted, looping background video in Custom HTML) keeps loading the normal way.
- On some phones (mostly iPhones) the browser may ask for a second tap before the sound starts.
- Thumbnails are copied to your site. Your site downloads each video's thumbnail from YouTube once and serves it itself, in the same sizes YouTube offers. Older or low-resolution videos have a smaller thumbnail, so they can look softer on large screens.
- A new video may show a dark box at first. Videos added when you save a page get their thumbnail before the save finishes. Videos already on the site get theirs in the background within a few hours of the update. Until then a video shows a dark box with the play button, and it still plays. A page your host has already cached keeps what it showed until the page is saved again or the cache is cleared.
- Deleted or private videos show a dark box with the play button, because YouTube has no thumbnail for them. Pressing play shows YouTube's "Video unavailable" message, as the player did before. Replace or remove the video.
Turn it off for one block
Add the class no-facade to the block (block sidebar → Advanced → Additional CSS class(es)). Videos in that block, and in any blocks inside it, load the full YouTube player as before. Use this if a video must be playable without the extra click, for example a video that a script on the page controls.
To turn it off for the whole site, go to Dirigible → Optimize Settings → YouTube Videos and check Load the YouTube player with the page. It's a quick way to rule out click-to-load when a video misbehaves. Purge the site cache afterwards so cached pages load the player too. If the card isn't there, update Dirigible Optimize. A developer can also add one line to the child theme: add_filter('ds_youtube_facade', '__return_false');
To keep click-to-load but show thumbnails straight from YouTube instead of copies (visitors' browsers then load them from YouTube's image server), add define('DS_YOUTUBE_THUMBS_REMOTE', true); to wp-config.php.