Performant & GDPR-friendly Iframe Embed JavaScript Library – iframemanager

Preview:

Description:

A lightweight, GDPR-compliant iframe manager that delays the loading of iframe content (like Youtube videos) until you agree to certain Privacy Policy and Terms.

More Features:

• Auto resize the iframe to fit its container.
• Custom thumbnail before loading the iframe content.
• Supports any service which uses iframes: Youtube, Vimeo, Twitch, etc.
• Easy to integrate with any cookie consent solution.
• Lazily load iframes & thumbnails to improve page speed.

How to use it:

1. Load the iframemanager’s JavaScript and Stylesheet in the document.

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

2. Initialize the iframe manager.

var manager = iframemanager();

3. Add services 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 hold the iframe manager and config the iframe content with the following data attributes:

• data-service: Service name
• data-id: Video ID
• data-params: Additional parameters
• data-thumbnail: Path to the thumbnail image
• data-thumbnailpreload: Determine whether to preload the thumbnail image
• data-autoscale: Determine whether to auto resize the iframe content

<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 options.

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 methods.

// accept specific service
manager.acceptService('youtube');
// accept all services
manager.acceptService('all');
// reject specific service
manager.rejectService('youtube');
// reject all services
manager.rejectService('all');