Home | About | View All Posts

4 Sept 2013

Close colorbox automatically when youtube video ends

Automatic closing functionality for Colorbox with YouTube Video can be achieved by using YouTube player API references.

Basic Understandings:
It is supposed that reader has basic concept about colorbox functionality. One can get more facts about colorbox via google search. This script had been developed to acquire specific requirement of the client. His requirement was – Close automatically colorbox or popup video of root domain, when youtube video ends, so that viewer automatically switched to home page, irrespective of close button click. Code has been written by help of youtube player js API reference.


It uses two html files – index.html and video.html. Colorbox functionaliy has been written at index page. Youtube video code (by using swfobject method) and auto close functionality has been written at video page.

There is a important parameter of youtube video interface - 'onStateChange'. It gives video status in numeric digit as unstarted=-1, ended=0, playing=1, paused=2, buffering=3, video cued=5. On the basis of built-in state one can write auto close injection into colorbox jquery close method(parent.$.fn.colorbox.close()). Same concept has been implemented here.

It has been tested successfully at xampp server. Codes has been commented well for easy understanding. Use active internet connection while check, because image thumb also has been taken via youtube and it is not physically at files folder.

Main page Code sample:

<!DOCTYPE html>
<title>Automatically closes colorbox when youtube video ends</title>
<link rel="stylesheet" type="text/css" href="css/colorbox.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script src="js/jquery.colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
$("a[rel='video']").colorbox({innerWidth:"460px", iframe:true, height:"580px", href:"video.html", escKey:false, overlayClose:false, scrolling:false,scrolling:false, overlayClose:false}).click(function(){
$('#cboxClose').addClass('video'); });
<div class="videothumb">
<h1>Automatically closes colorbox when youtube video ends</h1><br />
<a href="video.html" rel="video" class="cboxElement"><img src="http://img.youtube.com/vi/ITH3gwccX0A/2.jpg" border="0" alt=""></a>
<!--Youtube video thumb image can be taken as - "http://img.youtube.com/vi/THUMB_IMAGE_CODE/2.jpg". Replace THUMB_IMAGE_CODE with youtube 11 character video ID code. -->
<p>Click on Video Thumb</p>

Video page code sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
<script type="text/javascript">
//*****************YOUTUBE VIDEO CODE SECTION STARTS******************//
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
//Use the URL - (http://www.youtube.com/v/VIDEO_ID?version=3&enablejsapi=1) - to load video. In the URL, replace the string VIDEO_ID with the 11-character YouTube video ID only
swfobject.embedSWF("http://www.youtube.com/v/ITH3gwccX0A?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "425", "356", "8", null, null, params, atts);
//*****************YOUTUBE VIDEO CODE SECTION ENDS******************//
//*****************AUTO CLOSE COLORBOX CODE SECTION STARTS******************//
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
function onytplayerStateChange(newState) {
if(newState ==0){ //Video state code represents as unstarted=-1, ended=0, playing=1, paused=2, buffering=3, video cued=5
parent.$.fn.colorbox.close(); // It is close method of colorbox inbuilt functionality
//*****************AUTO CLOSE COLORBOX CODE SECTION ENDS******************//

Demo or download is using colorbox latest version - 1.6.4 Also video start frame has been set at '5380' second to view the auto close effect quickly. The demo youtube video duration is - 1:29:47.

Tags : , , , ,


Post a Comment