I’ve created this page to demonstrate the outputs in situ in WordPress when we try various ways of embedding privacy-compliant videos. This way the HTML can be inspected etc.
Embedded the usual way (ie. No concern for privacy)
Here is a video that is embedded the way we normally do. To embed, we simply paste in the shortened URL on the youtu.be domain provided within YouTube Studio, and we add parameter “rel=0” on the end to suppress related videos from other channels.
So, this video below is: https://youtu.be/krcMXE6Bq4w?rel=0
This is then redirected by YouTube to the full URL when the user plays the video, which is https://www.youtube.com/watch?v=krcMXE6Bq4w
When embedded on the page, this is what it looks like:
Functions.php updated with Consent Manager code
On our Dev environment (dev.recipetineats.com), we added the code from this page from Consent Manager’s documentation per Raptive’s recommendation, which on page load replaces the youtube.com domain in the embed URL with youtube-nocookies.com, and adds additional CM-related attributes to the iframe tag.
This page on Dev shows the resulting video embed.
For users who are presented with the consent banner and Reject All, they see this in place of the Youtube thumbnail:
If they click Accept, the video will play.
The problem is that for users in other regions who do NOT get presented the consent banner, they see this:
Manually altering the domain in WordPress block editor
Megan’s last email said:
Another update – as we continue testing, the team would like to ask if you can try removing the functions.php snippet you added? And then, can you manually update the singular YouTube embed with the
youtube-nocookieURL? Referring to the same URL you shared here: https://dev.recipetineats.com/rump-cap-roast-picanha-recipe/
The team would like to test this approach. Once you’ve had a chance to adjust it on your side, just let me know and I’ll loop them in to review.
I take this to mean alter the URL in the WordPress block editor? The only way to do this is through Code View in the editor.
So, changing this …
… to this:
When you do that, you get the following on the frontend instead of a video is just the URL displayed:
In the WP block editor, once again it has this error where the video should be:
Embedding iframe snippet from YouTube with Enhanced Privacy mode enabled
One thing I did stumble upon is if I use the Embed Video code snippet provided by YouTube instead of directly pasting in the URL into WordPress and having WordPress handle the embed.
It has an option for enabling privacy-enhanced mode:
If I check this box and then copy and paste in the iframe embed into WordPress via Code View, then you do get a video. Below I’ve pasted in the YouTube embed snippet:
This way does not drop cookies before or when you play the video (go to this page which has the video by itself and you will not see cookies drop). This is by design and effectively does the same thing as the other solution above, ie. replace youtube.com domain with youtube-cookie.com.
However it does not interact with Consent Manager’s banner, so does not display their thumbnail blocking viewing of the video until consent is given. I don’t think this actually matters though, since the issues flagged by the ICO was cookies firing. As long as we comply with that, we pass … ?
And since it’s not interacting with CM, it isn’t having the issue with showing a blank space for non-EU users.
Unfortunately from our perspective, the iframe embed is not feasible as a solution in its current form for a variety of reasons. But I believe it points the way to a potential solution if we cannot get CM to work.