Example Download

Many times we want to add some resource to a website that allows it to stand out in some way from the others and therefore achieve in the end a design that is original and attractive; In this entry we will learn about a resource that will help us in this task, it allows us to place videos stored on YouTube as background on a web page through a jQuery plugin.

Installing the jQuery.YoutubeBackground plugin

The jQuery.YoutubeBackground plugin allows you to place videos as the background; Its operation is very simple:

First we install the plugin available in the previous link (JavaScript and CSS) along with a version of jQuery:

<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<script src="jquery.youtubebackground.js"></script>

We apply the plugin on our web page indicating the YouTube video identifier using the videoId parameter within the YTPlayer function:

$('#video').YTPlayer({ 
  fitToBackground: true, 
  videoId: 'LSmgKRx5pBo'
});

YouTube video identifier

The URL to access any YouTube video is made up of a URL that looks like this:

https://www.youtube.com/watch?v=LSmgKRx5pBo

The v parameter is always present and its value allows you to uniquely identify each and every YouTube video (videoId) and therefore it is the only value that varies in the URL and is the text string found after the v parameter.

jQuery.YoutubeBackground Plugin Options

• ratio: Indicates the aspect ratio (16/9 by default) of the video.
• videoId: Video identifier.
• mute: Boolean that indicates whether to mute the video (true) or not (false).
• repeat: Boolean that indicates whether the video should be repeated upon completion
• fitToBackground: Fits the selected video to the background.

Some disadvantages of placing videos as the background

There are a series of disadvantages that can arise when we try to add videos as a background on a website, among the main ones we have:

• The main drawback as you can imagine is that it slows down the website; in other words it slows down the website loading process.
• Also, if the video has ads, you won't be able to remove them which can become a hassle.

Example Download

Extra: Colocando un video de YouTube de background con CSS

If your site does not use jQuery you can try this other solution, like almost everything on the web, we can do similar things that we do using JavaScript but with CSS, in a simpler, but generally less powerful way, although this is not the case; with the following lines of CSS code:

.container_video_background {
  position: fixed; 
  z-index: -99; 
  width: 100%; 
  height: 100%;
}

Y el HTML es solo el video con la clase anteriormente referenciada:

<iframe frameborder="0" height="100%" width="100%"  class="container_video_background" src="https://youtube.com/embed/TU_ID_VIDEO?autoplay=1&controls=0&showinfo=0&autohide=1"> </iframe>

Apart from referencing the class, it is important that you ensure that it has autoplay, in addition to not showing the controls using the attributes that are in the URL; Another important point is that in the URL token that says TU_ID_VIDEO is the ID of the YouTube video that you want to show in the background; additionally, the CSS uses the rule along with the z-index value: -99 to ensure that your content is placed at the bottom of the page; Finally, it occupies the entire size of the window by defining the width and height attributes with 100% plus the position: fixed that allows setting the background in an always visible area.

Extra: Placing a YouTube video in the background but only sound

Instead of using the iframe, which is ultimately a window that displays content, in this case a YouTube video, if we only want to play YouTube audio and not video, we can use the embed tag as we do below, in which we We define a loop attribute so that the audio of the video is repeated infinitely and another so that it starts when the website loads:

<embed height="0" width="0" src="http://youtube.googleapis.com/v/VIDEO_ID&autoplay=1&loop=1" />

All the examples we saw previously are responsive, which means that they adapt to the size of the screen, hiding certain parts of the video as necessary.