diff --git a/assets/js/privacy-embed.js b/assets/js/privacy-embed.js new file mode 100644 index 0000000..2e31547 --- /dev/null +++ b/assets/js/privacy-embed.js @@ -0,0 +1,60 @@ +document.addEventListener("DOMContentLoaded", () => { + const embeds = document.querySelectorAll(".privacy-embed"); + + // consent check + + embeds.forEach(embed => { + const provider = embed.dataset.provider || "youtube"; + const videoId = embed.dataset.id; + const consentKey = "consent-" + provider + "-" + videoId; + + // If consent is already given → directly load the embed + if (localStorage.getItem(consentKey) === "true") { + loadEmbed(embed, provider, videoId, false); + } else { + showPlaceholder(embed, provider, videoId, consentKey); + } + }); + + // It displays a placeholder before loading the actual embed + function showPlaceholder(embed, provider, videoId, consentKey) { + const thumbnail = embed.dataset.thumbnail; + + embed.innerHTML = ` +
+ ${provider} preview +

+ By playing this ${provider} embed you accept their + privacy policy. +

+ +
+ `; + + embed.querySelector(".privacy-accept").addEventListener("click", () => { + localStorage.setItem(consentKey, "true"); + loadEmbed(embed, provider, videoId, true); + }); + } + + // Actual iframe is loaded + function loadEmbed(embed, provider, videoId, autoplay) { + let src = ""; + + if (provider === "youtube") { + src = `https://www.youtube-nocookie.com/embed/${videoId}`; + if (autoplay) { + src += `?autoplay=1`; + } + } + + embed.outerHTML = ` + + `; + } +}); diff --git a/assets/sass/privacy-embed.scss b/assets/sass/privacy-embed.scss new file mode 100644 index 0000000..a23b0d5 --- /dev/null +++ b/assets/sass/privacy-embed.scss @@ -0,0 +1,35 @@ +.privacy-placeholder { + display: flex; + flex-direction: column; + align-items: center; + max-width: 560px; + margin: 1em auto; + position: relative; + gap: 1em; +} + +.privacy-placeholder img { + width: 100%; + height: auto; + border-radius: 6px; + border: 4px solid black; + display: block; +} + +.privacy-placeholder button { + position: absolute; + top: 100%; + left: 50%; + transform: translate(-50%, -50%); + padding: 0.5em 1em; + background: rgb(255, 0, 0); + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; +} + +.privacy-placeholder button:hover { + background: rgb(223, 30, 30); +} \ No newline at end of file diff --git a/assets/sass/style.scss b/assets/sass/style.scss index c9ac708..c7f6bb3 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -7,7 +7,8 @@ $theme-color-primary: #00f8a5; $theme-color-secondary: #44b0ff; $theme-color-tertiary: #fe7abf; - +// privacy styles +@import "privacy-embed"; html, body, div, @@ -459,7 +460,7 @@ section.timeline { } iframe { width: 100%; - min-height: 300px;; + min-height: 300px; } } li:nth-child(even) { diff --git a/content/timeline/2015-07-13-10th-birthday.md b/content/timeline/2015-07-13-10th-birthday.md index 73de6f9..810a7c0 100644 --- a/content/timeline/2015-07-13-10th-birthday.md +++ b/content/timeline/2015-07-13-10th-birthday.md @@ -12,4 +12,8 @@ params: Django has its first big birthday celebration. [A blog post](https://www.djangoproject.com/weblog/2015/jul/13/happy-10th-birthday-django/ ) is written and a Django Birthday conference is held in the US. Also this series of video greetings is sent from community all-over the world: - +{{< privacy-embed + provider="youtube" + id="ycKC3JMEk8U" + thumbnail="https://img.youtube.com/vi/ycKC3JMEk8U/maxresdefault.jpg" +>}} diff --git a/themes/django20/layouts/_default/baseof.html b/themes/django20/layouts/_default/baseof.html index c04667d..17773f7 100644 --- a/themes/django20/layouts/_default/baseof.html +++ b/themes/django20/layouts/_default/baseof.html @@ -84,6 +84,12 @@ {{ end }} {{ end }} +{{ with resources.Get "js/privacy-embed.js" }} + {{ with . | fingerprint "sha256" }} + + {{ end }} +{{ end }} + diff --git a/themes/django20/layouts/shortcodes/privacy-embed.html b/themes/django20/layouts/shortcodes/privacy-embed.html new file mode 100644 index 0000000..927d0e6 --- /dev/null +++ b/themes/django20/layouts/shortcodes/privacy-embed.html @@ -0,0 +1,20 @@ +{{ $provider := .Get "provider" }} +{{ $id := .Get "id" }} +{{ $thumbnail := .Get "thumbnail" }} + +
+ + {{ if $thumbnail }} +
+ Preview +

+ By playing this {{ $provider }} embed you accept + privacy policy. +

+ +
+ {{ end }} +
\ No newline at end of file diff --git a/themes/django20/static/js/privacy-embed.js b/themes/django20/static/js/privacy-embed.js new file mode 100644 index 0000000..ada3176 --- /dev/null +++ b/themes/django20/static/js/privacy-embed.js @@ -0,0 +1,42 @@ +document.addEventListener("DOMContentLoaded", () => { + const embeds = document.querySelectorAll(".privacy-embed"); + + embeds.forEach(embed => { + const provider = embed.dataset.provider || "youtube"; + const videoId = embed.dataset.id; + const consentKey = "consent-" + provider + "-" + videoId; + + // If consent is already given → directly load the embed + if (localStorage.getItem(consentKey) === "true") { + loadEmbed(embed, provider, videoId, false); + } + + // Attach listener to Accept button if present + const acceptButton = embed.querySelector(".privacy-accept"); + if (acceptButton) { + acceptButton.addEventListener("click", () => { + localStorage.setItem(consentKey, "true"); + loadEmbed(embed, provider, videoId, true); + }); + } + }); + + function loadEmbed(embed, provider, videoId, autoplay) { + let src = ""; + + if (provider === "youtube") { + src = `https://www.youtube-nocookie.com/embed/${videoId}`; + if (autoplay) { + src += `?autoplay=1&mute=1`; + } + } + + const iframe = document.createElement("iframe"); + iframe.src = src; + iframe.setAttribute("frameborder", "0"); + iframe.setAttribute("allowfullscreen", ""); + iframe.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"); + + embed.replaceWith(iframe); + } +}); \ No newline at end of file