fix: compatibility with Consent API

[matzeeable]

Context

Block Vimeo and Youtube until consent is given through a Consent API. This will take you to a GDPR compatible site.

Summary

This issue can be summarized in the following changelog entry:

• Fix / Tweak: Added compatibility with Consent API (GDPR); load Vimeo / Youtube Video only if consent is given

To get an idea of what this compatibility should solve, here's a little GIF:

Description

We will publish a WordPress plugin in about a month to for cookies consent management. The plugin has a content blocker, which blocks e.g. YouTube videos if the user has not yet given his consent for loading. To make this compatible with ARVA for all users, the plugin frontend must check our Consent API.

• Check for a given function window.consentApi.unblock
• If the function exists, it passes the Vimeo / Youtube API URL to the function and a reference to HTML DOM element where a visual Content Blocker can be created
• The function returns a Promise and gets resolved when the user has accepted the cookie for this service
• If the function does not exist, it falls back to the current implementation (load video immediate)

Question

Would you be willing to implement such a compatibility? If so, we could continue to exchange information together or implement this compatibility together.

We did something similar with Elementor: elementor/elementor#12567

Our internal reference ticket: #8ywh1n

[nextgenthemes]

Yes I can do something for that.

The easiest way I could do this is utilize the lazyload mode from the pro add-on that already only loads a thumbnail and plays the video on click. I could implement a check in the function that is fired when users click the thumbnails and just do nothing if the consent was not given before that. ARVE has no ability to show thumbnails in is base version so not sure how much sense it would make to implement it there.

[matzeeable]

Hi @nextgenthemes! Thanks for your reply! Do you have something like Slack so we can do a more intensive discussion about this? https://devowl.io/slack

[nextgenthemes]

I think Github issues are fine. You can also use my contact form. I do not have Slack.

But I have a few questions.

Consent API seems to be an already existing plugin, you will publish a plugin based on that?
I saw you actually did the code for Elementor as a PR, you if you want to that for ARVE Pro I can give you access to the private repo if you are actually a customer and purchased it.

Standard behavior is: Click thumbnail ⇾ load iframe and play video
Could be easily be changed to: Click thumbnail ⇾ show consent dialog ⇾ load iframe only when consent is given. The consent dialog is probably automatically displayed when first visiting the page so maybe triggering the dialog is not necessary but just have a simple check if the consent was already given or not.

[matzeeable]

Ok, let's do this in this issue. 🙂

Consent API seems to be an already existing plugin, you will publish a plugin based on that?

Consent API is the name of our API. Our plugin will be released mid November as free + pro version. I will send you the PRO version when you are ready to implement via email - just let me know.

you if you want to that for ARVE Pro I can give you access to the private repo

I do not think you need to give access to the PRO version, I think the implementation will be very easy and I think you know the best, where to put the middleware of the Consent API.

The consent dialog is probably automatically displayed when first visiting the page so maybe triggering the dialog is not necessary but just have a simple check if the consent was already given or not.

You are correct. The dialog appears the first time the user visits the page. If the user for example does not agree to YouTube, a so-called "Content Blocker" is shown instead of the YouTube Player. You can see a very basic example here:

1. Navigate to https://devowl.io/2020/real-media-library-4-9-rest-api-notice-video-and-translations/
2. Accept only essential cookies
3. Scroll down until you see the following section

So, you see the Content Blocker instead of the YouTube video. The user needs to agree the cookies to continue with the video.

Could be easily be changed to: Click thumbnail ⇾ show consent dialog ⇾ load iframe only when consent is given.

Due to the fact that AVRE loads thumbnail images from external sources:

... I think we need to go this way:

1. AVRE checks for Consent API, see example here
   1.1 If Consent API is available, pass an HTML element as second parameter where the Consent API should be shown
   1.2 If Consent API is not available, fall back to an immediate resolved Promise
2. Wait until Promise gets resolved
3. Continue with the default AVRE behavior: Show thumbnail -> Click thumbnail -> Load iframe and play video

A very basic example

const avreWrapper = ...; // TODO: Reference to a HTMLElement where the Content Blocker should be placed
const apiUrl = 'youtube.com'; // TODO: For example, vimeo should be player.vimeo.com
const consentPromise = window.consentApi ? window.consentApi.unblock( apiUrl, avreWrapper ) : Promise.resolve();
consentPromise.then( () => {
    // Do your standard AVRE behavior
} );

[matzeeable]

Hi @nextgenthemes ! Did you have any chance to have a look at this? 🙂

[nextgenthemes]

Nope

I do not think you need to give access to the PRO version, I think the implementation will be very easy and I think you know the best, where to put the middleware of the Consent API.

Sounds like you want me to do all the work. What do I get for doing this? A plugin I did not ask for?

Given your example page and that there is this "Content Block" banner. If the permission is not given and someone clicks the thumbnail then your content block banner stuff should be placed inside the wrapper from ARVE not sure if your example covers that ...

I suggest again that you do a PR, against the upcoming ARVE Pro version. And do the testing ... I review it and we can go from there.

Also not sure what api URLs your plugins supports but ARVE basically supports all video hosts that provide iframe embed codes. So would not know how to handle that. If that is player.vimeo.com for vimeo I guess if can be taken from the iframe src. Special case youtube-nocookie.com.

[nextgenthemes]

Also I did not know about this in place content banner before. It may even make sense to also implement it in the base plugin for normal mode. However currently the way the plugin works is it will load iframes without the need for any JavaScript and I would want to keep it that way. So I would want it implemented in a way that only if someone explicitly uses your plugin or activates an option that any JavaScript checks are run b4 the iframe is loaded. That would make things a little more complicated.

[matzeeable]

Hi again @nextgenthemes !

Sorry for my delayed response but finally we released our free plugin here: https://wordpress.org/plugins/real-cookie-banner/

Sounds like you want me to do all the work. What do I get for doing this? A plugin I did not ask for?

Sorry for the inconvenience, I may have expressed myself a little wrong. Of course I will do the coding. Can you please give me access to the ARVE Pro version, so I can test it locally and send you a PR?

Regards,
Matthew 😊