In recent times, video backgrounds in websites have been more and more common. They are commonly used as hero section backgrounds, or backgrounds for other sections. The use of graphics and visuals in motion provide nice eye-candy for your users and can also be used to supplement your branding or product.

When using video for your website, ideally you want to host your own videos as that way you have full control over where it is and how you use it. However, you may not want to deal with bandwidth concerns, preparing and encoding the videos for use on websites, etc. Wouldn’t it be easier if you could just upload a video to YouTube and use that?

The main issues with using YouTube embeds as a hero background or similar is that 1. YouTube embeds do not loop, and 2. YouTube embeds shows controls and other elements on mouse hover. We will use to use the YouTube IFrame Player API, as well as a few CSS techniques to address these issues.

Setting up the YouTube Embed using the IFrame Player API

Setting up the HTML

To embed a YouTube video using the IFrame Player API, first we will need to create a div with an ID that can be addressed by the API. This div will be replaced by an iframe once the IFrame Player API is initialized. The API is also loaded right after the div.

  <div class="yt-embed">
    <div data-id="6lK0rl1TnKc" id="yt-embed-player" class="yt-embed-player"></div>
    <div class="yt-embed-overlay"></div>
  </div>
  <script async src="https://www.youtube.com/iframe_api"></script>

In the example above, I have a container div .yt-embed , which contains our main div that will get replaced #yt-embed-player. We are storing the video id in data-id to make it easier to access later on. After our main embed div, we have a div for an overlay. Finally, we are loading the IFrame Player API.

Setting up the javascript

The IFrame Player API works by calling specific methods that are setup by the developer in the global/window scope. We will use the onYouTubeIframeAPIReady hook to initialize our player code. We will put the following code right under our HTML from above:

  <script>
    // Global variable to keep the player in
    // So we can access it later if needed.
    window.ytPlayer = null;

    // Global event handler that the IFrame Player API will call once ready.
    window.onYouTubeIframeAPIReady = () => {
      let playerElement = document.querySelector("#yt-embed-player");
      window.ytPlayer = new YT.Player('yt-embed-player', {
        // Video ID of the video we want to show. We will get this from data-id we set above
        videoId: playerElement.dataset.id,

        // Various settings and parameters for the player.
        // The required parameters for our purpose is: mute, loop and autoplay.
        // origin may be required for the player to work properly.
        playerVars: {
          controls: 0,
          showinfo: 0,
          modestbranding: 1,
          wmode: 'transparent',
          mute: 1,
          progressBar: false,
          loop: 1,
          rel: 0,
          autoplay: 1,
          origin: window.location.hostname
        },
        events: {
          // onReady() => called when the player is ready. Mute the video. It should already be muted, but this is just to make sure,
          // as the playerVars gets changed often.
          'onReady': (e) => { e.target.mute(); },

          // onStateChange => called whenever the video state changes. See the API Reference for the different states.
          // Play the video again when we detect that it has ended to loop.
          'onStateChange': (e) => {
            if(e.data === YT.PlayerState.ENDED) {
              e.target.playVideo();
            }
          },
        }
      })
    }
  </script>

The above code will handle a few things:

  1. Take care of loading our video iframe,
  2. Mute and autoplay the video with minimal UI and brainding,
  3. Checks to see if the video if finished, and if so restart the video (loop).

Applying CSS to disable hover over the YouTube Iframe embed

The only thing we need to address now is the player controls displaying on hover. To address this, we have the .yt-embed-overlay div. We will overlay this div over the video so it can’t be interacted with. 

.yt-embed {
  max-width: 100% !important;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;

  iframe {
    width: 100%;
    height: 100%;
    transform: scale(1.2);
  }

  .yt-embed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
  }
}

We are also increasing the scale of the iframe to clip any Youtube UI just in case. This is not required, but it is possible for the YouTube UI to display momentarily on first load, video end, etc.

With this, you should now have a div element with the video auto playing! You can style the video how you want by applying CSS to .yt-embed-overlay. In the example above, we are darkening the video:

NATURE