GitHub - knufri/iframemanager: 🍪 GDPR friendly iframe manager written in vanilla js

Demo | Features | Installation

IframeMananger is a lightweight javascript plugin which helps you comply with GDPR by completely removing iframes initially and setting a notice relative to that service. Iframes are loaded only after consent.

_{The plugin was mainly developed to aid CookieConsent with iframe management.}

Features

Lightweight
Complies with GDPR
Multilanguage support
Automatic/custom thumbnail support *
Allows to integrate any service which uses iframes
Improves website performance:
- no <iframe> tags on first page load
- lazyloads thumbnails
- lazyloads iframes
Can be integrated with any cookie consent solution

Installation

Download the latest release or use via CDN:

https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/iframemanager.js
https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/iframemanager.css

Import script + stylesheet:

<html>
  <head>
    ...
    <link rel="stylesheet" href="iframemanager.css">
  </head>
  <body>
    ...
    <script src="iframemanager.js" defer></script>
  <body>
</html>

Configure and run:

As external script

Create a .js file (e.g. app.js) and import it in your html markup:

<body>
    ...
    <script src="iframemanager.js" defer></script>
    <script src="app.js" defer></script>
<body>

Configure iframemanager inside app.js:

(function(){

    var manager = iframemanager();
    
    // Example with youtube embed
    manager.run({
        currLang: 'en',
        services : {
            youtube : {
                embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}',
                thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg',
                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'
                    }
                }
            }
        }
    });
})();

As inline script

<body>
  ...
  <script src="iframemanager.js" defer></script>

  <!-- Inline script -->
  <script>
    window.addEventListener('load', function(){
        
        var manager = iframemanager();
        
        // Example with youtube embed
        manager.run({
            currLang: 'en',
            services : {
                youtube : {
                    embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}',
                    thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg',
                    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'
                        }
                    }
                }
            }
        });
    });
  </script>
<body>

Create a div (will contain the iframe) with data-service and data-id attributes:
```
<div data-service="youtube" data-id="<video-id>"></div>
```

Configuration options

All available options for the <div> element:

<div
    data-service="<service-name>"	
    data-id="<resource-id>"
    data-params="<iframe-query-parameters>"
    data-thumbnail="<path-to-image>" 
    data-autoscale>
</div>

data-service : [String, Required] name of the service (must also be defined in the config. object)
data-id : [String, Required] unique id of the resource (example: video id)
data-params : [String] iframe query parameters
data-thumbnail : [String] path to custom thumbnail
data-autoscale : specify for responsive iframe (fill parent width + scale proportionally)

All available options for the config. object:

{
    currLang: 'en',     // current language of the notice (must also be defined in the "languages" object below)
    autoLang: false,    // if enabled => use current client's browser language 
                        // instead of currLang [OPTIONAL]

    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',           // iframe's allow attribute
                params : 'mute=1&start=21'      // iframe's url query parameters

                // function run for each iframe configured with current service
                onload : function(data_id, setThumbnail){
                    console.log("loaded iframe with data-id=" + data_id);
                }
            },

            // cookie is set if the current service is accepted
            cookie : {
                name : 'cc_youtube',            // cookie name
                path : '/',                     // cookie path          [OPTIONAL]
                samesite : 'lax',               // cookie samesite      [OPTIONAL]
                domain : location.hostname      // cookie domain        [OPTIONAL]
            },

            languages : {
                en : {
                    notice: 'Html <b>notice</b> message',
                    loadBtn: 'Load video',          // Load only current iframe
                    loadAllBtn: 'Don\'t ask again'  // Load all iframes configured with this service + set cookie		
                }
            }
        },

        anotherservice : {
            ...
        }
    }
}

Note: thumbnailUrl can be static string, dynamic string or a function:

static string : "https://path_to_image/image.png"
dynamic string : "https://myservice_embed_url/{data-id}"

function :

...
thumbnailUrl : function(data_id, setThumbnail){
    // fetch thumbnail url here based on data_id of the current element ...
    var url = 'fetched_url';

    // pass obtained url to the setThumbnail function
    setThumbnail(url);
},
...

APIs

The plugin exposes 3 main methods:

.run(<config_object>)
.acceptService(<service_name>)
.rejectService(<service_name>)

Example usage:

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

// accept all services (for example if user has given full consent to cookies)
manager.acceptService('all');

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

// reject all services (for example when user opts out of cookies)
manager.rejectService('all');

Both acceptService and rejectService work the same way:

set/erase cookie
create/remove iframes

Configuration examples

How to embed youtube videos

// Example with youtube embed
manager.run({
    currLang: 'en',
    services : {
        youtube : {
            embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}',
            thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg',
            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'
                }
            }
        }
    }
});

How to embed dailymotion videos

// Example with dailymotion embed
manager.run({
    currLang: 'en',
    services : {
        dailymotion : {
            embedUrl: 'https://www.dailymotion.com/embed/video/{data-id}',
            
            // Use dailymotion api to obtain thumbnail
            thumbnailUrl: function(id, setThumbnail){
            
                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;
                        setThumbnail(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="https://www.dailymotion.com/legal/privacy?localization=en" title="Terms and conditions" target="_blank">terms and conditions</a> of dailymotion.com.',
                    loadBtn: 'Load video',
                    loadAllBtn: 'Don\'t ask again'
                }
            }
        }
    }
});

How to embed vimeo videos

// Example with vimeo embed
manager.run({
    currLang: 'en',
    services : {
        vimeo : {
            embedUrl: 'https://player.vimeo.com/video/{data-id}',

            thumbnailUrl: function(id, setThumbnail){
            
                var url = "https://vimeo.com/api/v2/video/" + id + ".json";
                var xhttp = new XMLHttpRequest();
                
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        var src = JSON.parse(this.response)[0].thumbnail_large;
                        setThumbnail(src);
                    }
                };

                xhttp.open("GET", url, true);
                xhttp.send();
            },
            iframe : {
                allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;',
            },
            cookie : {						
                name : 'cc_vimeo'
            },
            languages : {
                'en' : {
                    notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer" href="https://vimeo.com/terms" title="Terms and conditions" target="_blank">terms and conditions</a> of vimeo.com.',
                    loadBtn: 'Load video',
                    loadAllBtn: 'Don\'t ask again'
                }
            }
        }
    }
});

How to embed twitch videos/streams/chats

// Example with simple twitch stream/channel
// IMPORTANT: replace "yourWebsite.com" with your own website
manager.run({
    currLang: 'en',
    services : {
        twitch : {
            embedUrl: 'https://player.twitch.tv/?{data-id}&parent=localhost&parent=yourWebsite.com',
            iframe : {
                allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;',
            },
            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="https://www.twitch.tv/p/en/legal/terms-of-service/" title="Terms and conditions" target="_blank">terms and conditions</a> of twitch.com.',
                    loadBtn: 'Load stream',
                    loadAllBtn: 'Don\'t ask again'
                }
            }
        }
    }
});

More "presets" for other service to come ...

License

Distributed under the MIT License. See LICENSE for more information.

Note

Not all services (example: twitch) allow automatic/easy thumbnail fetch.

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
demo		demo
dist		dist
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Table of Contents

Features

Installation

Download the latest release or use via CDN:

Import script + stylesheet:

Configure and run:

Create a div (will contain the iframe) with `data-service` and `data-id` attributes:

Configuration options

APIs

Configuration examples

License

Note

About

Releases

Packages

Languages

License

knufri/iframemanager

Folders and files

Latest commit

History

Repository files navigation

Table of Contents

Features

Installation

Download the latest release or use via CDN:

Import script + stylesheet:

Configure and run:

Create a div (will contain the iframe) with data-service and data-id attributes:

Configuration options

APIs

Configuration examples

License

Note

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Create a div (will contain the iframe) with `data-service` and `data-id` attributes:

Packages