Youtube Pop Up using jQuery

I wanted to share a way to create a simple lightweight DOM script that will enable a clean popup on your website. I realize that some might be using fancybox or lightbox, but sometimes there are cases when those solution might be too heavy, especially if you are working inside a CMS or have restrictions of what files you can upload and link to inside your framework.

See it in action here.

Download the Code here.

So the first thing to do will be to consider what is needed.
1) Create a click function on the html element class to handle the event
2) Create an overlay for the Website so the popup presentation looks clean
3) Get the url of the video and embed into an iframe
4) Create a div to hold the video - then embed it into the popup
5) Create the interaction to close the video popup

Here is the HTML we are going to use:

    <div class="video">
    	<span class="href">http://www.youtube.com/embed/I5cYgRnfFDA</span>
    	<img src="player.jpg" width="200" height="150" border="0" />
    	<h2>Click Here to View video 1</h2>
    <!--end .video--></div>
    
    <div class="video">
    	<span class="href">http://www.youtube.com/embed/7EXOxilOi7Y</span>
    	<img src="player.jpg" width="200" height="150" border="0" />
    	<h2>Click Here to View video 2</h2>
    <!--end .video--></div>

These are two divs with the classnames of video. We will attach the click handlers to those divs and place all the code within that handler that we need for the popup

Click Handler:

$('.video').click(function(){
	//all our code will go inside here…
});

Create the Overlay:

var b = $('body');//have this elem handy to append the overlay
var overlayDiv = $(document.createElement("div") );//create the overlay div
//need to add the height of the overlay dynamically
//depending on whatever the user's window size is
var h = $(window).height();
var overlayH = h/2 - 250;
overlayDiv.css({height	: h});
overlayDiv.addClass('overlay');//use the .overlay css styles
b.append(overlayDiv);//append the overlay to the body

Create the div container for the video:

var vidDiv = $(document.createElement("div") );//create the div container for the video 
vidDiv.addClass('vidDiv');//use the .vidDiv css styles
vidDiv.css({marginTop: overlayH})//position the video using dynamicaly calculated height positioning
vidDiv.append('<span class="close-vidDiv">Close - X</span>')// append the close button to the video div
vidDiv.addClass("vidDiv");//use the .vidDiv styles the video 
overlayDiv.append(vidDiv)//append the div to the 

Create an iframe for the video:

var i = $(document.createElement("iframe") );//create the iframe element
var videoLink = $(this).children('.href').text();//grab the video link
//add the i-frame styles and attributed to it
i.addClass('i-frame');
i.attr({
    src		: videoLink,
    border	: 0,
    frameborder	: 0
	})
vidDiv.append(i);//append the iframe to the vidDiv 

Create a close function:

	
//close all elements that have been created.
//this works because all of the elements created
//are children of the .overlay div
$('.close-vidDiv').click(function(){
	$('.overlay').remove();
})