Restricting the height of the body to 100% of the screen height you will see background-repeat: no-repeat; not working.

How is, or would this be fixed in the code?

It can also be seen in the snippet I provided.

(function randomBackground() {
  const classNames = [
    "bg1",
    "bg2",
    "bg3"
  ];

  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([
  "CHahce95B1g",
  "CHahce95B1g",
  "CHahce95B1g",
  "CHahce95B1g"
]);

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

body::before {
  content: "";
  background-repeat: no-repeat;
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.bg1 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

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

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

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.video-wrapper {
  position: relative;
  margin: auto;
  max-width: 640px;
}

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

.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;
}

<div >
  <div >
    <div >
      <div >
        <div ></div>
      </div>
    </div>
  </div>
</div>

The answer bellow gives me this:

2nd updated answer provided:

The updated answer causes the video to no-longer be centered in the middle.

The video was originally centered in the middle in my Question I posted.

The answer that was provided messed that up.

Seen Here:

CodePudding user response：

You should put the background-repeat: no-repeat; to the body, and not to the body::before. Also add min-height: 100%to your html

html{
  min-height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

body{
    height: 100%;
    background-repeat: no-repeat;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.container{
  display:flex;
  align-items:center;
  height: 100%;
}

The purpose of the .container is to center the video vertically.

Here is also the html code:

<div >
  <div >
    <div >
      <div >
        <div >
          <div ></div>
        </div>
      </div>
    </div>
  </div>
</div>