How to set up a GDPR content blocker to block YouTube and Vimeo videos in WordPress Grid Gallery

Last updated on

By using the plugin Wonder Grid Gallery, you can create a YouTube and Vimeo video gallery for your WordPress website.

This tutorial will guide you how to set up a GDPR content blocker to block YouTube and Vimeo videos in the gallery before a visitor accepts the consent or if the visitor chooses to not accept the consent.

We will use the free plugin WordPress Real Cookie Banner to set up the content blocker.

There are three steps in this tutorial:

  • Step 1 - Create a YouTube and Vimeo video gallery using the plugin Wonder Grid Gallery.
  • Step 2 - Add the gallery div to a content blocker.
  • Step 3 - Add opt-in code to re-initialise the gallery when the visitor accepts the consent.

Step 1 - Create a YouTube and Vimeo video gallery using the plugin Wonder Grid Gallery.

First please install the WordPress premium plugin Wonder Grid Gallery. You can download the free trial version from the home page, test it, make sure it works for you before upgrading to the Pro version.

You can view the help document for how to create a gallery using the plugin: Wonder Grid Galley Help Document.

Step 2 - Add the gallery div to a content blocker.

Install the free plugin WordPress Real Cookie Banner if you have not already done so.

After you install the plugin, in your WordPress dashboard, go to the left menu Cookies. In the Content Blocker tab, if you have already created a content editor, click to edit it, or if there is not a content blocker, click the "Add Content Blocker" button to create one.

Please note, normally there should be only one content blocker, otherwise it will create multiple-level blocked content.

In the Content Blocker editor, add the following text to the "URLs / Elements to block" input box.

div[class*="wonderplugingridgallery"]

In the "Connected cookies" input box, select YouTube and Vimeo.

youtube-content-blocker

wonderplugingridgallery is the class name of the Wonder Grid Gallery div. Adding the class name to the "URLs / Elements to block" input box will block the whole gallery before the consent is accepted or if the consent is not accepted.

Step 3 - Add opt-in code to re-initialise the gallery when the visitor accepts the consent.

In the Cookies tab, go to the sub-tab Functional. Edit the YouTube or Vimeo cookie. In the Cookie editor, add the following code to the "Code executed on opt-in" input box:

<script>
(function($){
  $(document).ready(function() {
    $(".wonderplugingridgallery").wonderplugingridgallery();
  });
})(jQuery);
</script>

The above code will re-initialise the grid gallery when the consent is accepted.