GDPR Embeds

by Kevin Pliester

HTML

<div class="dsgvo-video" data-embed-id="rlm6FHP9VQM" data-embed-type="youtube">
  <div class="dsgvo-inner">
    <button>Video anzeigen</button>
  </div>
</div>

<div class="dsgvo-video" data-embed-id="6TR12QnOAzE" data-embed-type="youtube">
  <div class="dsgvo-inner">
    <button>Video anzeigen</button>
  </div>
</div>

<div class="dsgvo-video" data-embed-id="85321553" data-embed-type="vimeo">
  <div class="dsgvo-inner">
    <button>Video anzeigen</button>
  </div>
</div>

SCSS

.dsgvo-video {
  background: #333;
  width: 560px;
  height: 315px;
  margin: 2% auto;
  position: relative;
  background-position: center center;
  background-size: 100%;
  .dsgvo-inner {
    position: relative;
    background: rgba(0, 0, 0, .25);
    width: 100%;
    height: 100%;
  }
  button {
    position: absolute;
    background: #333;
    border: none;
    padding: 15px;
    color: white;
    border-radius: 25px;
    cursor: pointer;
    left: 50%;
    top: calc(50% - 15px);
    transform: translate(-50%);
  }
}

JavaScript

(function($) {
  $(dsgvo_embed);

  function dsgvo_embed() {

    $('.dsgvo-video').each(function() {
      var self = $(this);
      var button = $(self).find('button');
      var embed_type = $(self).data('embed-type');
      var embed_id = $(self).data('embed-id');

      if (embed_type == 'youtube') {
        var _url = 'https://www.youtube.com/embed/' + embed_id;
        var _image = 'https://img.youtube.com/vi/' + embed_id + '/0.jpg'
        var _iframe = '<iframe width="560" height="315" src="' + _url + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>';
         $(self).css({
              'background-image': 'url(' + _image + ')',
            });
      }

      if (embed_type == 'vimeo') {
        var _url = 'https://player.vimeo.com/video/' + embed_id;
        var _iframe = '<iframe src="' + _url + '" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

        $.ajax({
          type: 'GET',
          url: 'https://vimeo.com/api/v2/video/' + embed_id + '.json',
          jsonp: 'callback',
          dataType: 'jsonp',
          success: function(data) {
            $(self).css({
              'background-image': 'url(' + data[0].thumbnail_large + ')',
            });
          }
        });
      }

      $(button).on('click', function(e) {
        e.preventDefault();
        $(self).html(_iframe);
      });
    });
  }

})(jQuery)