videoPlayer test page

Starting point for running unit tests with Jasmine in JSFiddle. Simply fork this fiddle to get started.

HTML

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">
      <div class="video video-frame"></div>
    </div>
  </div>
</div>

CSS

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

.bg2 {
  --color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg3 {
  --color-c: linear-gradient(45deg, #102eff, #d2379b);
}

.bg4 {
  --color-d: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}

.bg5 {
  --color-e: linear-gradient(115deg, #0a0e88, #00b1ce);

}

.bg6 {
  --color-f: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg7 {
  --color-g: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg8 {
  --color-h: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg9 {
  --color-i: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}


html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image:
    linear-gradient(var(--color-a)),
    linear-gradient(var(--color-b)),
    linear-gradient(var(--color-c)),
    linear-gradient(var(--color-d)),
    linear-gradient(var(--color-e)),
    linear-gradient(var(--color-f)),
    linear-gradient(var(--color-g)),
    linear-gradient(var(--color-h)),
    linear-gradient(var(--color-i));
  background-repeat: no-repeat;
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 10s ease-in 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}



.hide {
  display: none;
}

JavaScript

(function randomBackground() {
  const classNames = [
    "bg1",
    "bg2",
    "bg3",
    "bg4",
    "bg5",
    "bg6",
    "bg7",
    "bg8",
    "bg9"
  ];

  const random = Math.floor(Math.random() * classNames.length);
  document.querySelector("body").classList.add(classNames[random]);
}());



const videoPlayer = (function makeVideoPlayer() {
  const config = {};
  let player = null;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onYouTubeIframeAPIReady() {
    const frameContainer = document.querySelector(".video");
    videoPlayer.addPlayer(frameContainer, config.playlist);
  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
    shufflePlaylist(player);
  }

  function addPlayer(video, playlist) {

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };
    player = new YT.Player(video, config);

  }

  function init(videos) {
    config.playlist = videos.join();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

  return {
    addPlayer,
    init
  };
}());

videoPlayer.init([
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);