Changing YouTube border color to multiple colors via api

JavaScript
1

I was trying to figure this out the other day.

I was only able to get it to change to one color.

https://jsfiddle.net/mdjphnya/1/

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  let player;

  const wrapper = document.querySelector(".wrap");

  function changeColor1() {
    wrapper.classList.add("playerStatus1");
  }

  function changeColor2() {
    wrapper.classList.add("playerStatus2");
  }

  function colorClickHandler() {
    changeColor1();
    changeColor2();
    player.playVideo();
  }

  wrapper.addEventListener("click", colorClickHandler);

  function onPlayerReady(evt) {
    // const player = event.target;
    player = evt.target;
    player.setVolume(50); // percent
  }

  function onPlayerStateChange(evt) {
    // possible states values are:
    // -1 (unstarted), 0 (ended), 1 (playing),
    // 2 (paused), 3 (buffering), 5 (video cued).
    const state = evt.data;
    if (state > 1) {
      changeColor1();
    }
    if (state > 2) {
      changeColor2();
    }
  }
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.