GDPR YouTube Embeds

Embeds without jQuery. Only with css, js and html.

by Kevin Pliester

HTML

<div class="yt-embed" data-url="E0-TR6Mb6Pg"></div>

CSS

body {
  font-size: 16px;
  padding: 0;
}

.yt-embed button {
  border: 0;
  background: blue;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: .5rem;
  font-size: 100%;
  margin: 0 0 1.5rem;
  opacity: 1;
  transition: opacity .25s ease-in-out
}

.yt-embed button:hover {
  opacity: .8
}

.yt-embed {
  border: 1px solid grey;
  border-radius: .5rem;
  padding: 3rem
}

.yt-embed h3 {
  margin: 0 0 1.5rem;
  font-size: 120%
}

.yt-embed p {
  color: grey
}

JavaScript

/**
     * YouTube Embeds
     */
    function empty(element) {
      while (element.firstElementChild) {
        element.firstElementChild.remove()
      }
    }

    function GDPRYouTubeEmbed(element, index) {
      var tle = document.createElement('h3')
      var btn = document.createElement('button')
      var info = document.createElement('p')

      tle.innerHTML = 'Empfohlener externer Inhalt von YouTube'
      btn.innerHTML = 'Video ansehen'
      info.innerHTML = 'Durch das Anzeigen von externen Inhalten von YouTube erklärst du dich damit einverstanden, dass personenbezogene Daten von dir an YouTube übermittelt werden.'

      element.appendChild(tle)
      element.appendChild(btn)
      element.appendChild(info)

      btn.onclick = function(e) {
        var ifrm = document.createElement('iframe')
        var prnt = this.parentElement

        ifrm.setAttribute('src', 'https://www.youtube.com/embed/' + this.parentElement.dataset.url)
        ifrm.style.width = '100%'
        ifrm.style.height = 'auto'
        ifrm.style.aspectRatio = 16 / 9
        ifrm.setAttribute('frameborder', 0)
        ifrm.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture')
        ifrm.setAttribute('allowfullscreen', '')

        empty(prnt)

        setTimeout(function() {
          prnt.appendChild(ifrm)
        }, 250)
      }
    }

    document.querySelectorAll('.yt-embed').forEach(GDPRYouTubeEmbed)