YouTube фоновое видео остановить обновление

Question

Я использую API Youtube Player для создания фонового изображения видео на YouTube. У меня есть видео, но мне любопытно, есть ли у кого-нибудь идеи о том, как остановить буферизацию фона, когда видео заканчивается. Я бы хотел, чтобы когда видео закончилось, автоматически запускалось снова без буферизации. Есть ли у кого-нибудь опыт выполнения этой работы?

Вот мой js код:

function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('YouTubeBackgroundVideoPlayer', {
      videoId: 'LEOM8H95tyU', // YouTube Video ID
      width: 1280,               // Player width (in px)
      height: 720,              // Player height (in px)
      playerVars: {
        playlist: 'LEOM8H95tyU',
          autoplay: 1,        // Auto-play the video on load
          autohide: 1,
          disablekb: 1, 
          controls: 0,        // Hide pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 1,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          autohide: 0,         // Hide video controls when playing
          rel: 0,
          enablejsapi: 1
      },
      events: {
        onReady: function(e) {
            e.target.mute();
            e.target.setPlaybackQuality('hd1080');
        },
        onStateChange: function(e) {
          if(e && e.data === 1){
              var videoHolder = document.getElementById('home-banner-box');
              if(videoHolder && videoHolder.id){
                videoHolder.classList.remove('loading');
              }
          }else if(e && e.data === 0){
            e.target.playVideo()
          }
        }
      }
  });
}

Вот мой HTML код:

<section id="home-banner-box" class="home-banner loading">
    <div class="image video-slide" style="background-image: url($ImageURL)">
        <div class="video-background">
            <div class="video-foreground" id="YouTubeBackgroundVideoPlayer">
            </div>
        </div>
    </div>
</section>

Вот мой код CSS:

.home-banner .slide .video-slide {
  background-color: #000; }

.home-banner.loading .video-background {
  opacity: 0; }

.video-background {
  position: absolute;
  top: 50%;
  left: 0;
  padding-top: 56.25%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: 2s opacity ease;
  transition: 2s opacity ease;
  opacity: 1; }

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }

Вот ссылка на проблему, с которой я столкнулся: https://geniecast.com/autoplay-video-test/