Automatic closing functionality for Colorbox with YouTube Video can be achieved by using YouTube player IFRAME 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 IFRAME API reference.
Fuctionality:
It uses two html files – index.html and video.html. Colorbox functionaliy has been written at index page. Youtube video code and auto close functionality has been written at video page "video.html".
There is a important parameter of youtube video interface - 'onStateChange'. It gives video status in as YT.PlayerState.ENDED, YT.PlayerState.PLAYING, YT.PlayerState.PAUSED, YT.PlayerState.BUFFERING, YT.PlayerState.CUED. 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.
Examples:
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>
<html>
<head>
<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">
$(document).ready(function(){
$("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'); });
});
</script>
</head>
<body>
<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>
</div>
</body>
</html>
Video page code sample:
<!DOCTYPE html>
<html>
<body>
<!-- API REFERENCE URL - https://developers.google.com/youtube/iframe_api_reference -->
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" style="width:425px;height:356px;"></div><script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '356',
width: '425',
videoId: 'CWKRCDU-fVk',
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
///////////////
//YT.PlayerState.ENDED
//YT.PlayerState.PLAYING
//YT.PlayerState.PAUSED
//YT.PlayerState.BUFFERING
//YT.PlayerState.CUED
//////////////
//console.log("Video ended Brother!");
player.stopVideo();
parent.$.fn.colorbox.close(); // It is close method of colorbox inbuild functionality
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
Demo or download is using colorbox latest version - 1.6.4. The demo youtube video duration is - 1:53:00.
Demo | Download Source
0 comments:
Post a Comment