JSFiddle - React, Tailwind, and code Playground

by Michael Mandarino

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="bgvideo-layout-cntr">
  <div class="bgvideo-layout __padding-standard __h-pos-centered __v-pos-centered" data-sf-element="Video Banner Container">
    <div class="sf_colsIn content-wrp __width-contentmax" data-sf-element="Content" data-placeholder-label="Content">
      <!-- Your Content Here -->
    </div>
    <div class="bgcolor-overlay"></div>
  </div>
  <div class="sf_colsIn bgvideo-vid-wrp embed-container" data-sf-element="VideoCntr" data-placeholder-label="Video Container">
    <iframe id="youtube-background" width="560" height="315" src="https://www.youtube.com/embed/K4TOrB7at0Y?enablejsapi=1&controls=0&rel=0&showinfo=0&loop=1&modestbranding=1&autoplay=1&mute=1&playlist=K4TOrB7at0Y" frameborder="0" allow="autoplay;"></iframe>
    <iframe id="youtube-background" width="560" height="315" src="https://www.youtube.com/embed/jAXRhMCq6dE?enablejsapi=1&controls=0&rel=0&showinfo=0&loop=1&modestbranding=1&autoplay=1&mute=1&playlist=jAXRhMCq6dE" frameborder="0" allow="autoplay;"></iframe>
  </div>
</div>

JavaScript

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

  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtube-background', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.mute(); // Mute the video to enable autoplay in most browsers
    event.target.playVideo();
  }

  function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
      player.playVideo(); 
    }
  }