How to change background color and text color of clicked or auto-played video

Question

Problem: I have a HTML video playlist of Wistia videos and I'm trying to change the background-color and color of the videos as they are played, either by clicking on them or having the playlist autoplay.

I'm currently using a:focus to accomplish the click part, but I'm looking for something more sophisticated? as a solution. If you click out of the video playlist or on the video itself, the colors go back to their defaults.

Here is my code so far: https://codepen.io/atnd/pen/qzaVLX

JavaScript is not my strong suit, so I don't really know where to begin.

I'm using Embed Links to build a playlist, but I referenced Wistia's API and am unsure what is applicable: https://wistia.com/support/developers/player-api && https://wistia.com/support/developers/playlist-api

Here's my pathetic JS:

var vidcontainer = document.getElementById("vidcontainer");
var videos = video.getElementsByTagName("a");

for(i=0; i<videos.length; i++) {
  videos[i].addEventListener("click", function(event) {

  });
}

Thank you in advance for any help you can provide!

Answer 1

You could use something like this for toggling the backgroundColor when the menu item is clicked :

var vidcontainer = document.getElementById("vidcontainer");
var videos = vidcontainer.getElementsByTagName("a");

function highlightMenuItemAndDisableOthers(element) {
  element.style.backgroundColor = 'red'
  for (let video of videos) {
    if (video !== element) video.style.backgroundColor = 'white'
  }
}

for (let video of videos) {
  video.addEventListener('click', event => {
    highlightMenuItemAndDisableOthers(video, videos)
  })
}

For knowing which video is played automatically by the player, it will be more complex. You have to find an event in the API that tell when a new video is playing, then get the DOM element of the menu item and call the highlightMenuItemAndDisableOther method on it.

Hope it helps!