(Yet another) GDPR friendly YouTube integration


I am quite new to Hugo but thought I should share my findings along the way. Yesterday I took the challenge to build a GDPR compliant YouTube integration. Didn’t look if anybody else had already done it, obviously already some people did it and reported it here.

Nevertheless, here is my solution which consists of a few parts:

  • responsive iframe integration (with a pack of inline CSS, but it should work fine)
  • a “warning” modal where the user is informed about what is to happen
  • iframe only gets loaded on button click in the modal
  • youtube embedding is done via youtube-nocookie to reduce private data transfer at all
  • a local PHP-based preview image cache is used to load preview images in the background

This shortcode overwrites the default youtube-shortcode, so it’s a drop-in replacement. Kind of…

Find the code here at Gitlab.

In use: Before the button was clicked the modal is shown, a click on “Video laden” (“load video”) will hide the modal and preview image and insert the iframe.

I hope someone finds this helpful.

Feel free to ask anything.

edit: YouTube IDs can contain hyphens which are not allowed in JS function names. Wrapped it in a md5() to take care of “escaping” those characters, code snippet is updated.