https://github.com/mvsde/iframe-click-to-play

On-demand loading for iframes to conform with laws like GDPR.
https://github.com/mvsde/iframe-click-to-play

click-to-play gdpr iframe

Last synced: 30 days ago
JSON representation

On-demand loading for iframes to conform with laws like GDPR.

• Host: GitHub
• URL: https://github.com/mvsde/iframe-click-to-play
• Owner: mvsde
• License: other
• Created: 2020-03-27T09:23:56.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-17T05:05:10.000Z (about 1 year ago)
• Last Synced: 2024-09-18T11:29:59.227Z (about 2 months ago)
• Topics: click-to-play, gdpr, iframe
• Language: HTML
• Homepage: https://iframe-click-to-play.fynn.be
• Size: 235 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# iframe Click-to-Play

Some ``s might save cookies or do other kinds of tracking. This isn't allowed under GDPR law without prior consent from the user. A “click-to-play” solution helps with this situation.

[Demos →](https://iframe-click-to-play.fynn.be)

## Installation

```bash

npm install @mvsde/iframe-click-to-play

```

## Usage

### Markup

Rename the `src` attribute of the `` to `data-src` This makes sure no external content gets loaded without prior consent. A fallback element is required which may have arbitrary content. The trigger button can be part of the fallback element, but doesn’t need to be.

#### Standalone ``

[Demo for the standalone variant →](https://iframe-click-to-play.fynn.be/standalone.html)

```html



  
YouTube Video Embed

  
Click to load the embedded YouTube video.

  Load video



```


#### `` within a container

[Demo for the container variant →](https://iframe-click-to-play.fynn.be/container.html)

The `` can be nested inside a container. The script automatically searches for the first descendant ``.

```html



  





  
YouTube Video Embed

  
Click to load the embedded YouTube video.

  Load video



```


### JavaScript

Select the `` or the element containing it, the fallback element, and the trigger button. Create a new `IframeClickToPlay` instance.

```js

import { IframeClickToPlay } from '@mvsde/iframe-click-to-play'

const iframe = document.querySelector('.iframe')

const fallback = document.querySelector('.fallback')

const trigger = document.querySelector('.trigger')

new IframeClickToPlay({ iframe, fallback, trigger }).init()

```