Why is playVideo() not in the code?

JavaScript
96

Here is a spinner that we can use:

/* Spinner */
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
  opacity: 0.5;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

And here is a simple function that toggles the spinner:

    function toggleSpinner(cover) {
        cover.classList.toggle("lds-dual-ring");
    }

I first toggle the spinner when we init the covers:

    const cover = document.querySelector(opts.target);
    toggleSpinner(cover);
    const videoWrapper = cover.nextElementSibling;
    initPlayer(videoWrapper, onPlayerReady);

And toggle the spinner again, thus turning it off, when each player is ready.

    function onPlayerReady() {
        const coverSelector = opts.target;
        manageCover.init(coverSelector);
        const cover = document.querySelector(coverSelector);
        toggleSpinner(cover);
        cover.addEventListener("click", coverClickHandler);
    }

The code is now updated so that a loading spinner is on top of the cover when the video loads with the page. While the spinner is spinning you can’t yet click on the cover.

As soon as a video has loaded which only takes a second, the spinner goes away and you can click on the cover to start playing.

There’s a range of spinners to choose from at https://loading.io/css/
Some of the CSS needs to be adjusted though for it to work with your page. I made those adjustments when getting the dual-ring spinner working.

The code at https://jsitor.com/YVOb8ulZV is updated and ready to go.

2 Likes