More speed, less tracking with Embed Privacy

3rd party video hosting data usage and privacy

Concerns around embedding videos from third-party video hosting providers, include:

• Unnecessary data consumption: external video player scripts and styling is loaded whether the visitor chooses to play the video or not.
• Privacy and tracking: “free” video hosting providers like YouTube track your visitors, whether they consent or not.

There are several methods to address these concerns, including:

• Host your videos yourself; utilize the native WordPress video block to display them.
• Enable a plugin like Embed Privacy and get visitors’ consent before loading 3rd-party scripts.

In this article, I’ll use YouTube as an example as YouTube is a common source of videos, and it’s easier than writing “your third–party video hosting provider”. The solution, demonstrated, applies to any embed imaginable.

How does Embed Privacy help?

Normally, when you embed a YouTube video, WordPress loads their external player script immediately on page load. Embed Privacy ensures that no communication takes place with YouTube, until the visitor clicks an overlay with information regarding the privacy policy.

Not autoloading player scripts reduced network traffic 85%

In my tests, a blog post with just a YouTube embed results in 1500 KB of data transmitted, 7 tracking scripts and 2 cookies set. That is, before I click play.

With Embed Privacy enabled, data transfer initially reduced to just 234 KB, no tracking scripts or cookies. The player isn’t loaded until I actually hit play. That is a noticeable reduction in data transferred and definitely improves loading times, especially on slower connections.

Traffic with Embed Privacy compared to local hosting

Using three different WordPress blocks for embedding a video, I measured the data transferred …

1. with Embed Privacy (EP) enabled, before clicking play.
2. when the player script is loaded.
3. total once the playback is done.

Notice the 120 KB player loaded measurement for the native Video (self-hosted) block? That’s not an error. Since the WordPress video block simply renders an HTML video element, no additional player script is needed.

The energy costs of serving videos are affected by compression settings, video types, and data centre locations. It is not the goal of this comparison to conclude if one video hosting service is better than the other, but rather to demonstrate the data transfer savings and privacy implications.

The YouTube video embed block with overlay

To embed a YouTube video, you click the ⮫ Share button in YouTube, copy the given URL and paste it into the block editor. The block editor identifies the URL as a YouTube video, and insets a YouTube embed block.

That would normally show the video thumbnail and the red YouTube play button on it. With Embed Privacy enabled, a placeholder image (poster), and an overlay with a link to YouTube’s privacy policy is shown.

It’s easier to understand if I just show you:

Now, the visitor has the option to read and consent to YouTube’s privacy policy, before any data is sent to or from YouTube. It adds an extra click, true. But that consent, you’d have to get otherwise, say, in a cookie pop-up.

VideoPress video embed block with overlay

To embed a video from Learn.WordPress.org, click the share button ⮫ in the upper-right corner of the video. Paste the URL into the block editor, and a VideoPress block is inserted.

Some videos on Learn.WordPress.org are served by VideoPress.com. Below is the VideoPress version of the same video shown earlier. It’s worth mentioning, that the VideoPress version offers proper captions.

This particular screencast, served by VideoPress.com, is larger than its YouTube counterpart. But YouTube serves ads. Then again, your video might be discovered more on YouTube.

Embedding podcasts from Spotify

As mentioned, Embed Privacy supports most if not all embeds available in the block-editor. Below are some examples of the Spotify-embeds. Great podcasts by the way; do check them out.

How to analyze your website’s carbon emissions

Get an estimation of your website’s carbon footprint and start reducing it. There are a couple of amazing tools to support us in that mission. Topics in this episode include: What is the carbon footprint of a website? What tools are out there to measure the carbon emissions? Why does each tool claim a different CO2 footprint and how to work with it?

March 2024, The Green the Web podcast

Vitaly Friedman… Cleaner web design for a better environment.

Over the last decade, web pages have become ten times bigger, and up to 80% of the weight of a particular webpage can be waste—content and code that is not required for the page to function. Do web designers and developers simply not care? Vitaly Friedman believes that they do care but that they need better education about accessibility, usability, and sustainability.

January 2024, World Wide Waste with Gerry McGovern on Spotify

‘Building a Sustainable World Web’, with Michael Andersen

“Michael has been fascinated with problem-solving and using technology for a better world. This led Michael to found ‘Sustainable WWW’ — a non-profit focused on spreading knowledge about sustainable web design and development, as well as authoring the book ‘Sustainable Web Design In 20 Lessons’, published in March 2023.”

February 2024, The EcoSend Podcast

Custom styling used for Spotify Embed overlay

To avoid layout shifts and sort of “brand” the overlay background color with a color picked from the podcast, I use this bit of CSS below. It’s completely optional and not needed for Embed Privacy to work.

/** Embed Privacy WordPress Spotify Block styling 2024-03-20 **/
/** In the block settings; disable "Resize for smaller devices **/

/* The Spotify iframe is at least 152px high. Make sure our wrapper is too */
.wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
.wp-block-embed.is-provider-spotify .embed-privacy-overlay {
    min-height: 152px;
}

/* Appropriate aspect ratio for the spotify embed */
.wp-block-embed.is-provider-spotify .embed-privacy-container,
.wp-block-embed.is-provider-spotify .embed-privacy-overlay {
    aspect-ratio: 96/19;
    border-radius: 16px;
}

/* Make the default text color a little brighter for WCAG */
.wp-block-embed.is-provider-spotify .embed-privacy-container a,
.wp-block-embed.is-provider-spotify .embed-privacy-overlay :is(p, label) {
    color: #eee;
}

/* Set podcast specific background color, default to spotify inspired */
.wp-block-embed.is-provider-spotify .embed-privacy-container {
    background-color: var(--embed-spotify-background-color, #137C38);
    filter: drop-shadow(0 4px 4px #0002);
}

/* Make the inactive overlay a little darker */
.wp-block-embed.is-provider-spotify .embed-privacy-overlay {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Unset the hover overlay, revealing podcast specific background */
.wp-block-embed.is-provider-spotify .embed-privacy-overlay:hover {
    background-color: rgba(0, 0, 0, 0);
}

/* The overlay gets less tall, so reduce spacing. */
.wp-block-embed.is-provider-spotify .embed-privacy-overlay {
    padding: var(--wp--preset--spacing--30, 0.67rem);
    font-size: var(--wp--preset--font-size--small, small);
    line-height: var(--wp--preset--spacing--50, 1.5rem);
    --theme-content-spacing: var(--wp--preset--spacing--20, 0.44rem);
}

/* Shrink the logo and margins due to smaller container */
.wp-block-embed.is-provider-spotify .embed-privacy-logo {
    height: var(--wp--preset--font-size--medium, 1.5em);
    margin-bottom: var(--wp--preset--spacing--20, 0.44rem);
}

/* The "always load" checkbox has the smallest font size */
.wp-block-embed.is-provider-spotify .embed-privacy-input-wrapper {
    font-size: var(--wp--preset--font-size--x-small, x-small);
}

/* Wrap any caption below the Spotify figure in a balanced way (optional) */
.wp-block-embed.is-provider-spotify figcaption {
    text-wrap: balance;
}

/** Embed Privacy hidden screen reader text colors triggers contrast warning **/
/** The Button is hidden by other means, so reset the colors to pass wcag **/

:where(.embed-privacy-container) .screen-reader-text {
    color: black;
    background: white;
}

/** Podcast series specific background colors (optional) **/
/** Set the appropriate is-provider-spotify--[podcast] class on Spotify block **/

/** Green The Web by Sandy Dähnert **/
.wp-block-embed.is-provider-spotify--greentheweb {
    --embed-spotify-background-color: #083830;
}

/** The World Wide Waste via HCD podcast **/
.wp-block-embed.is-provider-spotify--worldwidewaste {
    --embed-spotify-background-color: #080070;
}

/** The EcoSend podcast **/
.wp-block-embed.is-provider-spotify--ecosend {
    --embed-spotify-background-color: #1C8259;
}

Conclusion on Embed Privacy; what I’ve learned

It can be enabled and disabled as needed

Keep in mind, that the Embed Privacy plugin simply adds to the functionality of the core Embed blocks. It does not offer some new privacy enhanced block for you to use. That means, you can enable Embed Privacy on an existing site and reap the benefits right away—and—disable it if you don’t like it or are troubleshooting something.

Immediately reduces initial data transfer

Not loading third-party player scripts or tracking code, saves network traffic. Obviously, if the visitor chooses to play the video, scripts will load.

Improves privacy substantially

Regular embeds share visitor data with YouTube and its counterparts right away. Embed Privacy eliminates that, until the visitor actively hits play. The privacy policy is readily available to make an informed decision.

Offers automatic thumbnail generation

Thumbnails, or poster images, are created automatically for certain popular video providers, including YouTube and Vimeo. For others, a manually uploaded thumbnail can be chosen.

Embed Privacy can be customized and extended

Every WordPress oEmbed is supported out of the box, and you can customize overlay text, overlay background and link to the privacy policy.

Works on multilanguage sites, but be alert

Plugins like PolyLang allow you to create content in multiple languages. Embed Privacy fully supports that, you can for instance link to an English privacy policy for English embeds, and Danish privacy policies for Danish embeds.

Make sure you edit the Embed Privacy settings for the right language; otherwise the correct embed overlay will not kick in. Don’t ask how I know.

It is not the only kid on the block 😉

Another plugin with similar functionality is Better Core Video Embeds by HighRise Digital. Theirs differs, as far as I can see, in that it doesn’t link to privacy policies in the overlay—something you could do in the caption though—and that it supports uploading thumbnails manually to each video block. It supports YouTube, Vimeo or Dailymotion, which might be enough for you.

A third friendly plugin is Lazy Embed by Beleaf. It supports YouTube, Vimeo, and Dailymotion. It’s a simple plugin which I highly recommend you check out, especially if you don’t need other embed sources, options and therefore potential complexity that comes with Embed Privacy

Embed Privacy helped reduce carbon emissions by 94%

According to Beacon the CO₂ emissions per view of this very page are:

• 1239 milligrams of CO₂ by default, grading F
• 77 milligrams of CO₂ with Embed Privacy, grading A+

This is, of course, true only as long as the videos and podcasts are left unplayed.

Should you install Embed Privacy for WordPress?

If you embed anything? Yes, definitely give it a go. Preconfigured out of the box, it works with any embed in WordPress. You don’t have to edit your embeds in any way. Performance gains and privacy improvements are impressive. And if you don’t like it after all, disable it. It leaves no trace behind.