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.

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:

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%:

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:

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:

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.

Tutorial introduction- using CSS to make a Youtube iframe responsive
and vertically centered