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!

Can you explain yourself a little more? You have right side navigation and a main video view. Do you want to always have the active video on the right side navigation highlighted? If that's the case, than all you need is a simple jquery class toggling script. — Jacob, Jun 20 '19 at 00:45
@Jacob The latter is correct. I want the have the always active video on the navigation highlighted with a background-color (#406acb) and a text color (#FFFFFF). Thank you for helping me clarify. — , Jun 20 '19 at 00:49

score 0 · Accepted Answer · answered Jun 20 '19 at 01:07

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!

Thank you! That worked like a charm. Here is my final solution: https://codepen.io/atnd/pen/qzaVLX — , Jun 20 '19 at 02:12

score 0 · Answer 2 · answered Jun 20 '19 at 01:14

I went ahead and wrote a pure js solution for you. You want to contain your class toggling somehow. Here is an example of the switching logic and a link to your working script on the bottom.

var videos = document.getElementsByTagName('a');

for(i=0; i<videos.length; i++) {
  videos[i].addEventListener("click", function(event) {
    document.querySelectorAll('li').forEach( el => el.classList.remove('active') );
    event.target.parentNode.classList.add('active');
  });
}

.active {
  font-weight: bold;
}

<nav id="Nav" class="interest-nav">
  <ul id="interest-ul">
    <li><a href="#box1">Fashion</a></li>
    <li><a href="#box2">Movies</a></li>
    <li><a href="#box3">TV</a></li>
  </ul>
</nav>

Here is your solution: https://codepen.io/jacobshenning/pen/pXNOay

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

2 Answers2