Author: | orestbida |
---|---|
Views Total: | 341 views |
Official Page: | Go to website |
Last Update: | June 16, 2021 |
License: | MIT |
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');