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.
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.