@mvsde/iframe-click-to-play

<iframe> click-to-play

Some <iframe>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.

Demo

Installation

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

Usage

Markup

The <iframe> has to have a data-src attribute pointing to the desired source. A fallback element is required which may have arbitrary content.

<iframe
  class="iframe"
  data-src="https://www.youtube.com/embed/OrxmtDw4pVI"
  width="960"
  height="540"
></iframe>

<div class="fallback">
  <h2>YouTube Video Embed</h2>
  <p>Click to load the embedded YouTube video.</p>
  <button>Load video</button>
</div>

JavaScript

Select the <iframe> and fallback elements and create a new IframeClickToPlay instance.

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

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

new IframeClickToPlay(iframe, fallback).init()

Changelog

0.1.1 (2020-03-27)

Features

• Add CommonJS build (355cac6)