Initial commit

assets/css/youtubeconsent.css

@@ -0,0 +1,50 @@
+.video__iframe:not([src]) {
+    display: none;
+}
+
+.video__iframe[src]+.video__notice {
+    display: none;
+}
+
+.video {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.video > form {
+    margin: 0;
+}
+
+.video::before {
+    display: block;
+    content: '';
+    width: 0;
+    height: 0;
+}
+
+.video__notice {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-position: center center;
+    background-size: cover;    
+}
+
+.video__notice > div {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    opacity: 0.9;
+    padding: 1.5rem;
+    display: flex;
+    width: 100%;
+}
+
+.video__notice > div > * {
+    max-width: 38rem;
+    margin: auto;
+}

assets/js/js.cookie.min.js

@@ -0,0 +1,2 @@
+/*! js-cookie v3.0.1 | MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,o=e.Cookies=t();o.noConflict=function(){return e.Cookies=n,o}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)e[o]=n[o]}return e}return function t(n,o){function r(t,r,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n.write(r,t)+c}}return Object.create({set:r,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],o={},r=0;r<t.length;r++){var i=t[r].split("="),c=i.slice(1).join("=");try{var u=decodeURIComponent(i[0]);if(o[u]=n.read(c,u),e===u)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){r(t,"",e({},n,{expires:-1}))},withAttributes:function(n){return t(this.converter,e({},this.attributes,n))},withConverter:function(n){return t(e({},this.converter,n),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(n)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"})}));

assets/js/youtubeconsent.js

@@ -0,0 +1,50 @@
+/**
+ * Activate all the videos on this page.
+ */
+function activateVideos() {
+    const iframes = document.querySelectorAll('.video__iframe[data-src*="youtube-nocookie.com"]');
+    iframes.forEach((iframe) => {
+        iframe.src = iframe.dataset.src;
+    });
+}
+
+
+/**
+ * Activate only the video with the given video ID
+ */
+function activateVideo(videoId) {
+    const surroundingDiv = document.getElementById(videoId);
+    const iframes = surroundingDiv.querySelectorAll('.video__iframe[data-src*="youtube-nocookie.com"]');
+    iframes.forEach((iframe) => {
+        iframe.src = iframe.dataset.src;
+    });
+}
+
+
+/**
+ * Invoked by the accept buttons to activate one or all videos.
+ * @param videodId The ID of the video to activate. Undefined to activate all.
+ */
+function onConsent(videoId) {
+    // Activate only the given video if the videoId is defined. Otherwise,
+    // activate all videos permanently by setting our cookie valid for a year.
+    if (videoId) {
+        activateVideo(videoId);
+    }
+    else {
+        Cookies.set('grav_youtubeconsent', 'true', { expires: 365 });
+        activateVideos();
+    }
+
+    return false;
+}
+
+
+/**
+ * When the page is loaded, activate all videos in case the "grav_youtubeconsent" cookie has the value 'true'.
+ */
+window.addEventListener("load", function () {
+    if (Cookies.get('grav_youtubeconsent') === 'true') {
+        activateVideos();
+    }
+});