Simplest possible privacy preserving embedding
Embeds that only connect to a remote after the user clicks on them. No magic, no Javascript, no fuss.
Why?
With the stricter laws on embedding, showing embedded content directly becomes a liability. There are solutions like Shariff or Embetty, but these are pretty complex tools.
I wanted something simpler. Something that I can understand completely at a glance.
The solution is a simple iframe with a data-link for the preview-content that is a link to the actual embedding. When a visitor clicks the preview, the iframe navigates to the embedded content. Before that, the embed is just an inactive link.
You’ll want to replace the image-link
https%3A%2F%2Fwww.draketo.de%2Fassets%2Fvideo-framebg-800x504.png by
something you host on your own server.
Due to the stricter rules on iframes, this embedding needs HTTPS to work. If that’s a problem right now, have a look at Let’s Encrypt.
With scrolling
This is a good option for pages like Wikipedia:
<iframe marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" style="aspect-ratio: 16 / 10; height: unset; width: 100%; " src="data:text/html,<a href%3D"https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FManifesto_to_the_Europeans%23Text"><p style%3D"position:absolute;color:white;text-decoration:underline;padding-left:1em">Click%20to%20read%20on%20Wikipedia</p><img%20src%3D"https%3A%2F%2Fwww.draketo.de%2Fassets%2Fvideo-framebg-800x504.png"%20width%3D"100%"><%2Fimg><%2Fa>"></iframe>
Without scrolling
This works for most youtube-videos:
<iframe scrolling="no" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" style="aspect-ratio: 16 / 10; height: unset; width: 100%; " src="data:text/html,<a href%3D"https%3A%2F%2Fwww.youtube.com%2Fembed%2FpvU64BzzTrg"><p style%3D"position:absolute;color:white;text-decoration:underline;padding-left:1em">Click%20to%20watch%20on%20Youtube</p><img%20src%3D"https%3A%2F%2Fwww.draketo.de%2Fassets%2Fvideo-framebg-800x504.png"%20width%3D"100%"><%2Fimg><%2Fa>"></iframe>
If it does not work, just replace www.youtube.com by an invidious instance.
Update 2026: Youtube broke this setup.
If youtube blocks embeds that preserve the privacy of those who don’t
watch the videos, consider using simple <video> tags and
self-hosting your videos. Those tags are pretty reliable nowadays.
For a self-hosted plattform with features similar to youtube, have a look at PeerTube.
If you need to embed via youtube for legal reasons (for example to discuss the videos of others) and there’s no technical way to do so without violating the right to privacy of your visitors, then just don’t embed them.
Background
I originally built this solution for Dryads Wake — a Text RPG that is usable both online and on the console. It starts typing once the site loads and ensures visibility, so when embedding it I had to make sure the site does not load until the visitor wants to play, otherwise it would cause the embedding site to scroll to it.