How to Use a Youtube Video as Your Webpage Background

Remember the hassles over the past few years when it came to 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. Internetrix 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 web server, meaning that a huge bandwidth quota might be used if the MP4 file size is large.

Last year, Internetrix re-developed the KidzWish Foundation website. A video background section was created on the new Homepage with the MP4 file hosted on the same server. In April, 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 it automatically replays, meaning that Chrome keeps downloading the .mp4 file from the server and keeps 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 `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; }

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!

Need help with your Web Development? Talk to us.

Pick up the phone, Live Chat, or email us if you would like us to share our web development skills, case studies, and knowledge to achieve your business goals and targets.

Internetrix combines digital consulting with winning website design, smart website development and strong digital analytics and digital marketing skills to drive revenue or cut costs for our clients. We deliver web-based consulting, development and performance projects to customers across the Asia Pacific ranging from small business sole traders to ASX listed businesses and all levels of Australian government.

Add Your Comment

No one has commented on this page yet.