GDPR Friendly iFrame Manager In Vanilla JS

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service. Iframes are only loaded after approval.

Features:

Complies with the General Data Protection Regulation
Multi-language support
Auto/custom thumbnail support*
Allows merging of any service that uses built-in frameworks
Improves website performance:
No <iframe> tags on the first-page load
lazyloads thumbnails
lazyloads inline frames
Can integrate with any cookie consent solution

Must Read: Vue.js for Using YouTube, Vimeo, DailyMotion, and Coub iframe API

How to make use of it:

1. Load the iframemanager’s JavaScript and Stylesheet.

<link rel="stylesheet" href="dist/iframemanager.css" />
<script src="dist/iframemanager.js"></script>

2. Initialize the iframe manager.

var manager = iframemanager();

3. Add companies to the iframe manager.

iframemanager.run({
  services : {
    // Youtube
    youtube : {
      embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}',
      iframe : {
        allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;',
      },
      cookie : {            
        name : 'cc_youtube'
      },
      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'
        }
      }
    },
    // Daily Motion
    dailymotion : {
      embedUrl: 'https://www.dailymotion.com/embed/video/{data-id}',
      // Use dailymotion api to obtain thumbnail
      thumbnailUrl: function(id, callback){
        var url = "https://api.dailymotion.com/video/" + id + "?fields=thumbnail_large_url";
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            var src = JSON.parse(this.response).thumbnail_large_url;
            callback(src);
          }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
      },
      iframe : {
        allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;'
      },
      cookie : {            
        name : 'cc_dailymotion'
      },
      languages : {
        'en' : {
          notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer" href="#link_dailymotion" title="Terms and conditions" target="_blank">terms and conditions</a> of dailymotion.com.',
          loadBtn: 'Load video',
          loadAllBtn: 'Don\'t ask again'
          
        }
      }
    },
    // Twitch
    "twitch" : {
      embedUrl: 'https://player.twitch.tv/?{data-id}&parent=localhost',
      iframe : {
        allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;',
        params: '',// optional
      },
      cookie : {            
        name : 'cc_twitch'
      },
      languages : {
        'en' : {
          notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer" href="#link_twitch" title="Terms and conditions" target="_blank">terms and conditions</a> of twitch.com.',
          loadBtn: 'Load stream',
          loadAllBtn: 'Don\'t ask again'
        }
      }
    }
  }
});

4. Create a DIV container to carry the iframe supervisor and config the iframe content with the next data attributes:

<div data-service="youtube"
     data-id="VIDEO ID"
     data-params="start=21&mute=1"
     data-thumbnail="/path/to/poster.jpg"
     data-thumbnailpreload
     data-autoscale >
</div>

5. Available configuration choices.

iframemanager.run({
  currLang: 'en', 
  autoLang: false, 
  services : {
    myservice : {
      embedUrl: 'https://myservice_embed_url>/{data-id}',
      // set valid url for automatic thumbnails   [OPTIONAL]
      thumbnailUrl: 'https://<myservice_embed_thumbnail_url>/{data-id}',  
      // global iframe settings (apply to all iframes relative to current service) [OPTIONAL]
        iframe : {
          allow : 'fullscreen', 
          params : 'mute=1&start=21'
          // function run for each iframe configured with current service
          onload : function(data_id, callback){
            console.log("loaded iframe with data-id=" + data_id);
          }
        },
        // cookie is set if the current service is accepted
        cookie : {
          name : 'cc_youtube',
          path : '/',
          samesite : 'lax', 
          domain : location.hostname
        },
        languages : {
          en : {
            notice: 'Html <b>notice</b> message',
            loadBtn: 'Load video',
            loadAllBtn: 'Don\'t ask again'
          }
        }
    },
      anotherservice : {
          ...
      }
    }
});

6. API strategies.

// accept specific service
manager.acceptService('youtube');

// accept all services
manager.acceptService('all');

// reject specific service
manager.rejectService('youtube');

// reject all services
manager.rejectService('all');