How to Use a Youtube Video as Your Webpage Background in 2019

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.

In recent years, 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

Comments (7)

Thakur 24/07/2019 9:49pm

I like the valuable information you provide in your articles. I’ll bookmark your blog and check again here frequently. I am quite certain I will learn a lot of new stuff right here! Best of luck for the next! To know more about

robin rawal 23/07/2019 6:24pm

First of all i want to say thank you for sharing such a good information.Absolutely great Article.

robin rawal 23/07/2019 6:24pm

First of all i want to say thank you for sharing such a good information.Absolutely great Article.

Chris 16/01/2019 12:19pm

This is a great alternative. However the initial load is slow and between auto replays there is a flicker.

Eve Hunt 05/01/2019 7:20pm

Neat blog! Is your theme custom made or did you download it from somewhere?
A theme like yours with a few simple tweeks would really make my blog stand out.
Please let me know where you got your theme. Many thanks

Joshua Duncan 15/10/2018 2:32pm

we host video that auto plays on desktop and mobile! Works great for desktop video backgrounds.

Edd 26/06/2018 10:19pm

Thank you for this!

Before I found this I wasted half a day messing around with outdated 'Youtubeplayer' JS scripts. Who'd have thought it was so simple these days!

Subscribe to our mailing list to receive exclusive offers, free resources and more!