GDPR compliant Youtube embed

1

Hi,
I am trying to build a documentation with GDPR compliant Youtube embeds. So I downloaded the Grav-RTFM Skeleton und since the Youtube Plugin did not work for me and did not really offer a two-click-solution with giving consent to youtube cookies either, I searched in the Internet and found this tutorial about privacy-friendly video embeds.

So for testing purposes I…

  • copied the markup of the tutorial to a chapter-page
  • copied the css of the tutorial to /user/themes/learn2/css/custom.css
  • added a file ‘youtube-consent.js’ in /user/themes/learn2/js/ and copied the script under " Storing the user’s preference" in the linked tutorial in that file
  • in /user/themes/learn2/templates/partials/base.html.twig I searched for {% block javascript %} and I added a line {% do assets.addJs('theme://js/youtube-consent.js', 99) %} in that block. This is how I understood the Asset Manager.

The result is, I see the message with asking for consent for youtube cookies and it is nicely styled by the css. But when I click of the “Allow content …” button, the page reloads and everything stays the same - no video, but still the consent message.
I tested it on a local webserver and in the logs I can see a “GET /user/themes/learn2/js/youtube-consent.js”, so I guess, the code is executed, but somehow it does not work.

Am I doing something wrong? Does someone have a tip?

2

Try checking JS errors with Preserve log checked in Dev Tools Console. Sounds like click is not caught by JS

3

@elvoss, You will probably find errors in the console, because of the import statement.

The following is one way of making the app work (using Quark):

  • Go to Releases · js-cookie/js-cookie · GitHub and download file js.cookie.mjs into folder user/themes/quark/js
  • Change the import statement in file youtube-consent.js into:
    import Cookies from './js.cookie.mjs';
  • Update /user/themes/quark/templates/partials/base.html.twig with:
    {% do assets.addJs('theme://js/youtube-consent.js', {
    group:'bottom',
    type:'module'
   }) 
%}

Note: Do not make any changes inside an installed theme. Always make changes in an inhering theme.

Update: Not all webservers (e.g. PHP’s build-in server) appear to support a mime-type for extension mjs. You can rename file js.cookie.mjs into js.cookie.js and update the import statement accordinly. See reply #9.

4

Thank you for your extensive answer!
And you are right, I should have created a new theme, but I was too lazy. Well, now I have an own theme, I downloaded js.cookie.mjs and put in in /grav/user/themes/mytheme/js/ and I changed my youtube-consent.js import-Statement accordingly. Also I updated my /user/themes/mytheme/templates/partials/base.html.twig as you suggested it.

Unfortunately, there is still nothing happening, when I click on that button. The page refreshes, but it still shows the message with asking for consent.

I would like to monitor the behaviour as @Karmalakas suggested it, but I can’t find a Preserve log option anywhere. I found the bin/grav logviewer, but it simply displays the content of /grav/logs/grav.log and the latest entry is five days old…

5

@elvoss,

  • Any errors in Dev Console?
  • Are breakpoints in youtube-consent.js being hit?
  • Are any cookies for youtube being created?
  • Do you have something like uBlock running?
  • You might consider trying a fresh install of Grav and using theme Quark like I did
6

Thank you for your hints.
I can tell, that there is no youtube cookie set - there are only six cookies set by grav (gp-premium, grav-admin-flexpages, grav-admin-sidebar, grav-site-420612c-admin, grav-site-420612c and grav-tabs-state).
I do have uBlock origin in Firefox, but the behaviour does not change, if I turn it off. In chromium, where I have not installed anything like that, happens exactly the same.

I would like to try to find the error in the Dev Console, but I don’t know, how to start it. I can only find the logviewer, but I don’t get any new messages there. If that does not work, I would try a fresh install.

7

Oh sorry, I guess, you talked about the console in the dev tools of my browser. And indeed, I found an error:
Laden des Moduls von “http://localhost:8000/user/themes/my-theme/js/js.cookie.mjs” wurde auf Grund eines nicht freigegebenen MIME-Typs ("") blockiert.
My translation:
Loading of module “http:localhost:8000/user/themes/my-theme/js/js.cookie.mjs” was blocked because of a not enabled MIME-Type.
There is a link to further informations.

Unfortunately I don’t know, how to solve this :-/

8

@elvoss, Yes, Karmalakas and I were talking about the Dev Console of the browser…

Googling for firefox loading module blocked mjs does show some past issues when loading .mjs files.

Would it be possible for you to try Chrome?

9

@anon76427325 I tried it again with Chromium and its Dev Tools Console and the error message was similar, but a bit more concrete. So I googled around and found, that renaming js.cookie.mjs to js.cookie.js could be a solution. So I tried this and updated the importStatement in youtube-consent.js and the asset.addJs Statement in base.html.twig accordingly and now it works!
Thank you very much for your help!!

10

@elvoss, Glad it is working.

It might be that the webserver you are using is not yet providing the correct mime-type for .mjs files. Which one are you using?

I wonder if adding the correct mime-type to /system/config/media.yaml would solve the issue. Would you mind trying if adding the following solves the issue when using .mjs files.?

According the according the IANA spec spec, which deprecated text/application:

mjs:
  type: file
  thumb: media/thumb-js.png
  mime: application/javascript

or according the WHATWG spec spec:

mjs:
  type: file
  thumb: media/thumb-js.png
  mime: text/javascript

Or you could try adding the proper mime-type to the config of the webserver.

11

@anon76427325 , I am using the built-in webserver by executing following command in the grav directory: php -S localhost:8000 system/router.php.
I tried both specs and updated the above mentioned files accordingly. But unfortunately, then I get the same error message as before in the dev tools console: (not enabled MIME-Type “/”). I also tried to restart the local webbrowser, but that does not help either.
Sorry!

12

@elvoss, According its docs the php build-in webserver does not support extension .mjs:

Standard MIME types are returned for files with extensions: .3gp, .apk, .avi, .bmp, .css, .csv, .doc, .docx, .flac, .gif, .gz, .gzip, .htm, .html, .ics, .jpe, .jpeg, .jpg, .js, .kml, .kmz, .m4a, .mov, .mp3, .mp4, .mpeg, .mpg, .odp, .ods, .odt, .oga, .ogg, .ogv, .pdf, .pdf, .png, .pps, .pptx, .qt, .svg, .swf, .tar, .text, .tif, .txt, .wav, .webm, .wmv, .xls, .xlsx, .xml, .xsl, .xsd, and .zip

Unfortunately, I haven’t found a way to configure the build-in webserver.

Anyway, you’ve found a solution…

Oh, by the way, I’ve updated my former reply with your .js solution and also removed the superfluous loading of asset js.consent.mjs using Asset Manager.

13

Ah, thats good to know. So I guess, the mjs solution will work, when I push my grav folder to a real webserver (with nginx).
Thank you for the update. I marked your post as a solution for this topic!