(function(){

  // grab data-toggle buttons
  let btns = $$('[data-overlay-toggle]');

  // attach eventlisteners to the buttons
  Array.prototype.map.call(btns, (btn) => {
    btn.addEventListener('click', (e) => {
      e.preventDefault();
      // grab reference to overlay based on data-attribute
      let overlay = $(`[data-overlay=${btn.dataset.overlayToggle}]`)

      // toggle the visibility CSS class
      overlay.classList.toggle('overlay-visible');

      // run open/close logic based on presence visibility class
      let visible = overlay.classList.contains('overlay-visible');
      if (visible) {
        showOverlay.call(overlay);
      } else {
        closeOverlay.call(overlay);
      }

    });
  });

  // overlay is closed
  function closeOverlay() {
    this.classList.remove('overlay-visible');
    document.removeEventListener('keydown', escapePressed);
    document.removeEventListener('click', closeOverlay);
    toggleVideoState('pause', this.querySelector('.overlay__video'));
  }

  // overlay is shown
  function showOverlay() {
    // both esc or close button closes the overlay
    document.addEventListener('keydown', escapePressed.bind(this));
    toggleVideoState('play', this.querySelector('.overlay__video'));
  }

  function escapePressed(e) {
    // if escape is pressed
    if ( e.keyCode === 27 ) {
      closeOverlay.call(this);
    }
  }

  function toggleVideoState (state, element) {
    // if state === 'pause', pause video. Else: play video
    const iframe = element.querySelector('iframe').contentWindow;
    console.log(element, iframe);
    const func = state === 'pause' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); // for some reason this doesn't work with ES6 interpolation
  }

})();

@@ -1557,42 +1557,8 @@
 ow;%0A
-    console.log(element, iframe);%0A
     

remove console.log