Categories:

Youtube Player API and creating a simple Youtube video lightbox

Updated: April 15th, 16'

Video content is permeating every corner of the web, with Youtube taking the charge. With hundreds of hours of videos uploaded to Youtube every minute these days, it's only natural that Youtube videos have also made their way into millions of web sites. Embedding a Youtube video on a site is simple enough, via an iframe tag. In this tutorial, however, we'll go beyond the basic application to see how to create a simple Youtube video lightbox that pops up and auto plays when the user requests a video using Youtube's Player API. Specifically, we'll see how to do the following:

  • Using CSS to make a Youtube iframe responsive on the page
  • Using CSS to center a Youtube iframe vertically on the page
  • Attach parameters to the Youtube iframe URL to modify its behaviour, such as auto play or play from a specific point.
  • A quick overview of using Youtube API to embed and manipulate a video
  • Creating a basic Youtube video Lightbox!

Lightbox Demo: Click on one of the sample links below to launch a Youtube video inside lightbox: Video 1 | Video 2 | Video 3

The script has been delivered, the stage set. Lets get started then, one step at a time.

Using CSS to make a Youtube iframe responsive on your page

By default, a Youtube video embed is fixed in dimensions, which is akin to a car that can only make right turns:

<!-- Markup from Youtube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/SbQc_JLUH7k?rel=0" frameborder="0" allowfullscreen></iframe>

Here the iframe's width is 560px, which on a desktop browser may be too small, and on a phone, too wide to view in its entirety. Using CSS, we can make the Youtube iframe responsive, so its dimensions become fluid to always fit its parent container's width while maintaining the desired aspect ratio height wise (such as 16:9). An excellent article on Alist Apart "Creating Intrinsic Ratios for Videos" shows us one novel way to do this, by wrapping the iframe in a DIV container and styled with the following CSS:

<!-- HTML -->
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/SbQc_JLUH7k?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<!-- CSS -->
.videowrapper{
	position: relative;
	padding-top: 25px;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
}
.videowrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Demo:

As you can see, the width of the Youtube iframe always fills the entire width of its container, while its height changes accordingly based on a 16:9 ratio. This ratio is produced by setting the bottom padding of the parent container to 56.25% (9 divided by 16); you can change this to a different ratio, such as 75% (for 4:3 ratio instead).

If you don't wish the iframe to span the entire page, simply wrap another DIV around the parent "videowrapper" DIV, and set that DIV's width to something other than 100%:

<!-- Limiting the width of the IFRAME youtube -->
<div style="width:60%; min-width:480px">
	<div class="videowrapper">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/SbQc_JLUH7k?rel=0" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

Using CSS to center a Youtube iframe vertically on your page

Moving towards our goal of creating a Youtube Lightbox, the next trick we should pick up is how to center an element vertically on the page. There are numerous ways to center an element in CSS, though in our case we need something versatile that can handle centering an element that's fluid in dimensions (unknown width/ height). For that there is the "ghost element technique", which relies on giving the parent element of the target we wish to vertically center a pseudo element with height set to 100%. This is more succinctly demonstrated, so here's an example:

<!-- HTML -->
<div class="parent">
	<div class="centeredchild">
	This content is centered inside the parent container. Width and height can both be fluid.
	</div>
</div>
<!-- CSS -->
/* Parent element can be any width and height */ 
.parent{
	width: 300px; /* can be any width */
	height: 300px; /* can be any height */
	background: gray;
	text-align: center;
}

/* pseudo element to force vertical centering of child element */
.parent:before{
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

/* Centered child element can be any width and height */ 
.centeredchild{
	display: inline-block;
	vertical-align: middle;
	width: 80%; /* can be any width */
	background: #eee;
}

Demo:

This content is centered inside the parent container. Width and height can both be fluid.

The key is to set the "ghost" pseudo element's height to 100%, plus add vertical-align:middle to both the pseudo element and child element we wish to vertically center. The result is the child element always appearing vertically centered inside its parent, even if the child element's dimensions are not specified or fluid in nature.

This technique in combination with the previous allows us to embed a Youtube iframe on our page that's centered squarely on our page in addition to being fluid in dimensions. This takes us closer to a Youtube lightbox we'll implement soon. You can see this in practice below- resize the window to see how the Youtube iframe remains centered in both directions on the page:

See Example

Ok, moving beyond manipulating our Youtube iframe from the outside, it's time now to pop up the hood and mess around with its internals! By attaching parameters to the Youtube video URL or serving the video using the Youtube Player API, we can directly control the player via JavaScript, such as auto play a video when the page loads, play another video when the current one ends, mute the player etc. Lets see how to do all this in the next section.

Controlling a Youtube video via URL parameters and the Youtube Player API