Size

</div> <div align="center">

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. </i> </sub>

</div> <br>

Key features
Installation
Configuration options & API
Configuration examples
- youtube
- dailymotion
- vimeo
- twitch
- google maps
Usage with CookieConsent
License

Features

Lightweight
Complies with GDPR
Multilanguage support
Automatic/custom thumbnail support *
Allows to integrate any service which uses iframes
Improves website performance:
- lazy-load thumbnails
- lazy-load iframes
Can be integrated with any consent solution

Installation

Download the latest release or use via CDN/NPM:

https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.3.0/dist/iframemanager.js
https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.3.0/dist/iframemanager.css

using npm:

npm i @orestbida/iframemanager

Import script + stylesheet:

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

Configure and run:

<details><summary>As external script</summary> <p>

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

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

Configure iframemanager inside app.js:

(function(){

    const im = iframemanager();

    // Example with youtube embed
    im.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;'
                },
                languages : {
                    en : {
                        notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
                        loadBtn: 'Load video',
                        loadAllBtn: "Don't ask again"
                    }
                }
            }
        }
    });
})();

</p> </details>

<details><summary>As inline script</summary> <p>

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

  <!-- Inline script -->
  <script>
    window.addEventListener('load', function(){

        const im = iframemanager();

        // Example with youtube embed
        im.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;'
                    },
                    languages : {
                        en : {
                            notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
                            loadBtn: 'Load video',
                            loadAllBtn: "Don't ask again"
                        }
                    }
                }
            }
        });
    });
  </script>
<body>

</p> </details>

Create a div 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
    data-ratio="<x:y>">
</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-title : [String] notice title
data-params : [String] iframe query parameters
data-thumbnail : [String] path to custom thumbnail
data-ratio : [String] custom aspect ratio (Available values.)[v1.1.0]
data-autoscale : specify for responsive iframe (fill parent width + scale proportionally)
data-widget : ignore the default aspect ratio; specify when implementing a custom widget with explicit width and height (twitter, facebook, instagram ...)[v1.2.0]

How to set attributes on the `iframe` element

You can set any attribute by using the following syntax:

data-iframe-<attribute> [String] note: replace <attribute> with a valid attribute name. [v1.1.0]

Example:

<div
    data-service="youtube"
    data-id="5b35haQV7tU"
    data-autoscale
    data-iframe-id="myYoutubeEmbed"
    data-iframe-loading="lazy"
    data-iframe-frameborder="0">
</div>

<br>

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]

    // callback fired when state changes (a new service is accepted/rejected)
    onChange: ({changedServices, eventSource}) => {
        // changedServices: string[]
        // eventSource.type: 'api' | 'click'
        // eventSource.service: string
        // eventSource.action: 'accept' | 'reject'
    },

    services : {
        myservice : {

            embedUrl: 'https://<myservice_embed_url>',

            // set valid url for automatic thumbnails   [OPTIONAL]
            thumbnailUrl: 'https://<myservice_embed_thumbnail_url>',

            // 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: (dataId, setThumbnail) => {
                    console.log(`loaded iframe with data-id=${dataId}`);
                }
            },

            // 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: {
            // ...
        }
    }
}

Any other property specified inside the iframe object, will be set directly to the iframe element as attribute.

Example: add frameborder and style attributes:

{
    // ...

    services: {
        myservice: {
            // ...

Iframemanager

Install / Use

README

Table of Contents

Features

Installation

Download the latest release or use via CDN/NPM:

Import script + stylesheet:

Configure and run:

Create a div with `data-service` and `data-id` attributes:

Configuration options

How to set attributes on the `iframe` element

Iframemanager

Install / Use

README

Table of Contents

Features

Installation

Download the latest release or use via CDN/NPM:

Import script + stylesheet:

Configure and run:

Create a div with data-service and data-id attributes:

Configuration options

How to set attributes on the iframe element

Create a div with `data-service` and `data-id` attributes:

How to set attributes on the `iframe` element