Iframe Manager, a GDPR approach to iframes

profile icon
Orest Bida
— Jun 13, 2021
8 min read

Demo page

Why

This plugin was created to aid cookieconsent with iframe management. A separate module which allows you to embed iframes in compliance to GDPR .

How it works

There are no iframes during the first page load — since even empty iframes are resource intensive — so div elements are used instead. A notice with 2 buttons will be shown; the user can choose to either load the iframe "just this time" or to "always load" the iframes configured with that specific service.After accepting the terms/notice the iframe will be created.

You can configure any service which uses iframes like youtube, vimeo, dailymotion, twitch etc.

Features

  • Lightweight
  • GDPR compliant
  • Supports all major browsers
  • Can handle multiple services
  • Support for multilanguage
  • Iframe lazyloading
  • Can be integrated with any cookie consent solution

What it looks like

Here's a small demo of the plugin in action:


<div
    data-service="youtube" 
    data-id="dIP7wWY4Znw"
    data-params="start=90"
    data-autoscale>
</div>
Show javascript code
manager.run({
    currLang: "en",
    services : {
        youtube : {
            embedUrl: "https://www.youtube-nocookie.com/embed/{data-id}",
            thumbnailUrl: "https://img.youtube.com/vi/{data-id}/hqdefault.jpg",
            iframe : {
                allow : "accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;"
            },
            cookie : {
                name : "cc_youtube",
                path : "/blog/iframe-manager"
            },
            languages : {
                'en' : {
                    notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer" href="https://www.youtube.com/t/terms" title="Terms and conditions" target="_blank">terms and conditions</a> of youtube.com.',
                    loadBtn: 'Load video',
                    loadAllBtn: 'Don\'t ask again'
                }
            }
        }
    }
});

Upcoming improvements

It's current weak point is support for custom services (iframes with custom attributes/options). An aspect which I plan to improve with future releases.

Where to find it

If you want to give it a try, you can find the plugin on github . Contributions are very welcome!

Related tags

This article has 0 views