The YouTube html5 player is loaded with the webpage when embedded using the script from YouTube.com. Google also generously store 37 cookies on your computer - before the user clicks play. Not ideal for page speed nor privacy.
Here is a way to show only the poster-image and title on page load and then load the YouTube player in 'Privacy Enhanced' mode when a visitor clicks play.
This improves page speed, and limits the amount of tracking that YouTube and Google can do outside YouTube.com. Here's a movie trailer embedded with this method:
The poster image is retrieved from ytimg.com, the title from a YouTube oembed JSON response, and the YouTube player is loaded on click from youtube-nocookie.com
I've also made the script and CSS available on jsdelivr
Play-button in overlay
We need a play-button on top of the poster image, here is the PNG and Photoshop files. It is loaded from the style sheet....
Load the script in the page HEAD section
light-yt.js on your host and load it in HEAD, or use this link from jsdelivr.net
With Ghost CMS we can use Handlebars asset-tag to point to the theme's assets/js folder.
This script adds an event listener
Add the CSS classes
We also need some styling. Add the CSS classes from the Gist above. The
.videotitle uses the ingenious clamp
font-size: clamp(0.9rem, 2vw, 1.3rem) for scaling.
<link rel="stylesheet" type="text/css" href="yt-light.css">
Or load the classes from jsdelivr.net..
Embed the video using YouTube ID
Find the YouTube video ID in the URL on youtube.com
Enter the ID as
data-id in this
<div> where you want to embed the video on your page. That's it - only the poster image and title will be loaded, the YouTube player IFRAME is loaded when the user clicks Play.
<div class="youtube-player" data-id="sXiRZhDEo8A"></div>
Here's the result, tested with a Foals music video
A note on privacy and cookies
This script loads the YouTube player from
youtube-nocookie.com domain which prevents YouTube from setting a persistent cookie. It does, however, store a
yt-remote-device-id identifier in Local Storage on your browser. This ID is (possibly...) anonymous but will track videos you view. Technically this device-ID could be matched against authenticated sessions and Google would be able to identify the user. The YouTube player will also send the full URL of the page where the video is embedded to Google. To avoid all tracking use a paid service such as Streamable, Vimeo or Wistia.