videoPlayer test page

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

CSS

.bg1 {
  --color: linear-gradient(76.9deg, #e8bbf2, #8787fd 51.66%, #84caff 109.18%);
}

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

.bg3 {
  --color: radial-gradient(60% 60% at 50% 50%, rgb(40, 0, 115), rgb(0, 0, 0));
}

.bg4 {
  --color: radial-gradient(rgba(80, 0, 0, 0.1) 0%, rgba(80, 0, 0, 0.2) 30%, rgba(21, 11, 1, 0.9) 100%), linear-gradient(to right, #02111d, #037bb5, #02111d);
}

.bg5 {
  --color: radial-gradient(rgba(80, 0, 0, 0.1) 0%, rgba(80, 0, 0, 0.2) 30%, rgba(21, 11, 1, 0.9) 100%), linear-gradient(to right, #02111d, #037bb5, #02111d);

}

.bg6 {
  --color: radial-gradient(circle at 5% 13%, #0b7bd2, #3d41b4 40%, #591fa4 101%);
}

.bg7 {
  --color: linear-gradient(95deg, #67115e, #2d0546 31%, #160322);
}

.bg8 {
  --color: linear-gradient(darkviolet, navy);
}

.bg9 {
  --color: linear-gradient(120deg, rgba(255, 125, 255, 0.7), rgba(125, 85, 255, 0.7) 70%);
}

.bg10 {
  --color: linear-gradient(90deg, #10069F, #9932CC);
}

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

body {
  background-image: var(--color);
  background-repeat: no-repeat;
}

JavaScript

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

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