Youtube video already seen

by Simon Hi

HTML

<p>The outline of a video turns red after the video has been fully played. The information is kept in the localStorage in order to be able to display this red outline again during a further visit.</p>

<iframe src="https://www.youtube.com/embed/JJHE_2vIqNQ?enablejsapi=1" height="175px" width="325px"></iframe>

<iframe src="https://www.youtube.com/embed/3NpEMFgNCnQ?enablejsapi=1" height="175px" width="325px"></iframe>

<iframe src="https://www.youtube.com/embed/WjZRR6SceT0?enablejsapi=1" height="175px" width="325px"></iframe>

<button type="button" onclick="resetMyLocalStorage()">
  Reset local storage
</button>

CSS

button {
  display:block;
  font-size: 2rem;
  margin: 1rem auto;
}

iframe {
  display: block;
  margin: 5rem auto;
  border: 0;
}

.alreadySeen {
  outline: 2rem solid red;
}

.neverSeen {
  outline: 2rem solid green;
}

JavaScript

var tag = document.createElement('script');

tag.src = 'https://www.youtube.com/iframe_api';

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var alreadySeen = getMyLocalStorage();
var player = [];
var videos = document.querySelectorAll("iframe");

function ytId(z) {
  var src = z.getAttribute('src');
  return src.replace(/^.*\/([^\/?]+)\?.*$/, "$1");
}

function setPlayer(z) {
  z.id = ytId(z);
  player[z.id] = {
    id: z.id
  };
  if (alreadySeen.indexOf(z.id) === -1)
    z.classList.add('neverSeen');
  else z.classList.add('alreadySeen');
  player[z.id].onPlayerStateChange = function(e) {
    if (e.data == YT.PlayerState.ENDED) {
      //console.log(z.id);
      z.classList.remove('neverSeen');
      z.classList.add('alreadySeen');
      if (alreadySeen.indexOf(z.id) === -1) {
        alreadySeen.push(z.id);
        setMyLocalStorage();
      }
    }
  }
}

videos.forEach(z => setPlayer(z));

function setYT(z) {
  player[z.id].player = new YT.Player(z.id, {
    events: {
      'onStateChange': player[z.id].onPlayerStateChange
    }
  });
}

function onYouTubeIframeAPIReady() {
  videos.forEach(z => setYT(z));
}

function getMyLocalStorage() {
  var s = localStorage.getItem('alreadySeen');
  if (s) return JSON.parse(s);
  return [];
}

function setMyLocalStorage() {
  localStorage.setItem('alreadySeen', JSON.stringify(alreadySeen));
}

function resetMyLocalStorage() {
  alreadySeen = [];
  setMyLocalStorage();
  videos.forEach(z => z.classList.remove('alreadySeen'));
  videos.forEach(z => z.classList.add('neverSeen'));
}