xpon
Contact

How to Use a Youtube Video Webpage Background in 2020

 ⁄ By | 01.07.2019

Are you looking to embed a Youtube Video Webpage Background? It is now much easier.

Remember the hassles over the past few years regarding embedding video?

Well, times have changed: HTML5 has made embedding video inside a web page really easy now.

You just need to prepare a good-quality video in MP4/H.264 format, host it on your web server and insert the <video> tag with the MP4 URL on your designed page. You might need more files in a different format to support all browsers.

If you want to have an immediate impact on your customers, than a background video is the way to go.

XPON has recently completed some great web designs using HTML5 video background. The only downside to this web technique is that the video has to be hosted on the webserver, meaning that a huge bandwidth quota might be used if the MP4 file size is large.

The KidzWish website

Internetrix redesigned the KidzWish Foundation website. A video background section was created on the new Homepage with the MP4 file hosted on the same server. We found that the website was consuming hundreds of Gigabytes in bandwidth quota every month.

This is abnormal because the KidzWish website neither has many images nor file resources to download. We investigated the log files and found 99.7% of the bandwidth was generated from the Homepage MP4 file!

We configured cache control on our servers for the .mp4 file, meaning that browsers should then cache the video file. However, after testing different browsers, it turned out that Chrome could not correctly cache a file larger than 10 Megabytes. The Homepage video is 22MB and automatically replays, meaning that Chrome keeps downloading the .mp4 file from the server and generating bandwidth!

Fixing the cache issue

Fixing the cache problem in Chrome isn’t easy. The solution we found was to host the video on a 3rd party video hosting provider like Youtube and embed it in the background as HTML5 Video.

STEP 1

To fix things, first you require the Youtube IFrame Player API to hide various video information and control buttons.

Sample video.js

function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('YouTubeBackgroundVideoPlayer', {
      videoId: '{$loadYouTubeVideoID}', // YouTube Video ID
      width: 1280,               // Player width (in px)
      height: 720,              // Player height (in px)
      playerVars: {
        playlist: '{$loadYouTubeVideoID}',
          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()
          }
        }
      }
  });
}

STEP 2

Once you use this API, the embedded Youtube video looks clean and is perfect for playing in the background. In the `onStateChange` event, if the video starts to play, the fallback image is removed. This has two benefits:

  1. The ability to display a loading icon or image while the video is still buffering
  2. It displays a fallback image on mobile devices as few mobile browsers support video autoplay
Sample 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>

<script async src="https://www.youtube.com/iframe_api"></script>
<script async src="video.js"></script>
Sample 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; }

 

Mobile limitations

Unfortunately, this implementation is not designed to work on mobile devices. Due to limitations put in place by device manufacturers like Apple and Samsung, the autoplay functionality of this script has been prevented from working on mobile. The reasoning behind the decision was to prevent high data usage on mobile networks, and is more of a business decision rather than a technical limitation.
Alternative implementations using HTML5 players have had success with getting autoplay to work on mobile devices, and would be worth looking into to augment this script if you require this functionality to be included in your video player.

So what have we achieved?

So there you have it: the Youtube video is now playing in the background of the section. So easy! We don’t need to worry about the bandwidth anymore and we now have a much better streaming service from Youtube, which is free!