Beautiful Video Background with YouTube API and HTML5

Video backgrounds are quite popular and usually used to create a visual appeal which any static image would not be able to do so. Videos immediately grab the attention of the users and make them be part of the action. Such eye-catchy methods are used in many product and company websites and create a new visual experience.

Today I would like to show you a simple way to do such full-width video backgrounds. With a simple plugin called YTPlayer you can create a lovely video presentation and astonish the users when they land on your website.

YTPlayer is a useful jQuery plugin that will allow you to use any YouTube video as a background on a page you like by using YouTube API and HTML5 data-* attributes. This plugin also can be used as an ordinary video player on any website.

With YTPlayer you can create so much more than simple video backgrounds. The plugin allows you to randomize a list of videos so every time you reload the page, a random video will be played. You can also create a visible list with videos so the user can select which one to be played full screen and they can be shuffled. If you are keen on giving control to your website visitors, you can put play/pause or previous/next buttons. It really depends on your ideas and needs.

You can download the plugin and some demos at the bottom of this post.

Beautiful Video Background with YouTube API and HTML5

Have a look at the steps below to see how can you implement YTPlayer.

#Step 1 – jQuery

Make sure that you include the jQuery library and the YTPlayer plugin in your code:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>

#Step 2 – YTPlayer CSS

To have a proper look, you should have the CSS stylesheet linked as well.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">

#Step 3 – Call YTPlayer Plugin


#Step 4 (Optional) – Have a look at some of the options to enhance the look.

// (string) the CSS selector of the DOM element where you want the video background; 
// if not specified it takes the “body”;
// if set to “self” the player will be instanced on that element.
containment: "body",

// ‘4/3’, ‘16/9’ or ‘auto’ (string) to set the aspect ratio of the movie; 
// if ‘auto’ the aspect ratio will be retreived form the getDataFromFeed method.
ratio: "16/9",

videoURL: null,

playlistURL: null,

// Set the seconds the video should start at.
startAt: 0,

// Set the seconds the video should stop at. If 0 is ignored.
stopAt: 0,

// true (boolean) or false play the video once ready.
autoPlay: true,

// set the volume level of the video.
vol: 100,

// Show or hide a raster image over the video.
addRaster  : false,

// Set the opacity of the player;
opacity: 1,

// or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”
quality: "default", 

// mute the audio;
mute: false,

// true (boolean) or false loops the movie once ended.
loop: true,

// show or hide the player controls;
showControls: true,

showAnnotations: false,

// Show or hide the YT logo and the link to the original video URL.
showYTLogo : true,

stopMovieOnClick: false,
stopMovieOnBlur: true,

// activate the new HTML5 full screen behavior.
realfullscreen : true,

// activate the Google Analytics event tracker for that player.
gaTrack: true,

onReady: function (player) {}

Download YTPlayer DEMO

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *