//https://developers.google.com/youtube/iframe_api_reference
let initialVideoId = null;

document.addEventListener('DOMContentLoaded', function () {
    let apiLoaded = false;

    [].slice.call(document.querySelectorAll('.clicksgefuehle-video .poster')).map(function (poster) {
      poster.addEventListener('click', function (e) {
        if (!apiLoaded) {
          // laad api and play via onPlayerReady
          const tag = document.createElement('script');
          tag.src = "https://www.youtube.com/iframe_api";
          const firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
          apiLoaded = true;
          initialVideoId = poster.nextSibling.id;
          poster.style.display = 'none';
        } else {
          YT.get(poster.nextSibling.id).playVideo();
          poster.style.display = 'none';
        }
      });
    });

    [].slice.call(document.querySelectorAll('.youku-video .poster, .tencent-video .poster')).map(function (poster) {
      poster.addEventListener('click', function () {
        poster.style.display = 'none';
        const iframe = document.createElement('iframe');
        iframe.setAttribute('src', poster.getAttribute('data-src'));
        iframe.setAttribute('allow', 'autoplay')
        poster.parentNode.insertBefore(iframe, poster);
      });
    });
  },
  false
);

function onYouTubeIframeAPIReady() {
  [].slice.call(document.querySelectorAll('[data-youtube-id]')).map(function (player) {
    const playerId = player.id
    const youtubeId = player.getAttribute('data-youtube-id');
    if (!playerId) {
      return;
    }
    const yt_player = new YT.Player(playerId, {
      height: '390',
      width: '640',
      videoId: youtubeId,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  if (event.target.getIframe().id === initialVideoId) {
    event.target.playVideo();
  }
}

function onPlayerStateChange(event) {
  if (event.data === 0) {
    // Video finished
    const player = event.target.getIframe();
    player.previousElementSibling.style.display = 'block';
  }
}