Playing video over java applet

Hello guys ,

For those interested in playing youtube video or want to show webpage over applet can use this code,

Please note code is not commented well and users are requested to modify it accordingly.

<style>

html,body {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color:#6A6666;

width:100%;

height:100%;

background-color: white;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

overflow:hidden;

}

#ytapiplayer {display:block; width:560px; height:340px;

position:absolute;

top:100px; left:300px;

background:#000;

/* for IE

filter:alpha(opacity=0);

/* CSS3 standard

opacity:0;*/

z-index:1000; visibility:hidden;

}

#resizable {

background-color:black;

}

#framediv {

background-color:black;

}

.iframeclass{

position:absolute;

top:0;

left:0;

margin-top:0px;

margin-left:0px;

width:100%;

height:100%;

background-color:'black';

/* for IE

filter:alpha(opacity=0);

/* CSS3 standard

opacity:0; */

}

</style>

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>

<script>

//jquery only used for safari detection here

var isSafari=0;

var userAgent = navigator.userAgent.toLowerCase();

jQuery.each(jQuery.browser, function(i, val) {

if(i=="safari"&&($.browser.webkit)&&!(/chrome/.test(userAgent))){

isSafari=1;

}

});

function fnMinMax(obj,videoWidth,videoHeight){

if(obj.title=='Minimize'){

var sd = document.getElementById('resizable');

sd.style.visibility='hidden';

sd.style.display='none';

var shimmer=document.getElementById('shimmer');

shimmer.style.width=''+videoWidth+'px';

shimmer.style.height='20px';

obj.title='Maximize';

obj.innerHTML='Maximize';

}else{

var videoHeightNew=parseInt(videoHeight)+20;

var shimmer=document.getElementById('shimmer');

shimmer.style.width=''+videoWidth+'px';

shimmer.style.height=''+videoHeightNew+'px';

var player=document.getElementById('ytapiplayer');

shimmer.setAttribute('bgcolor','#000');

player.style.width=''+videoWidth+'px';

player.style.height=''+videoHeightNew+'px';

var sd = document.getElementById('resizable');

sd.style.visibility='visible';

sd.style.display='block';

obj.title='Minimize';

obj.innerHTML='Minimize';

}

}

function showPopUp(videoUrl,videoWidth,videoHeight,videoPosX,videoPosY){

if(videoUrl==''){

//videoUrl='http://www.youtube.com/v/UXQ8ym4ufeA&hl=en_US&fs=0&hd=0&autoplay=1&showsearch=0&iv_load_policy=3&rel=0';

}

if(videoWidth!=''&&videoHeight==''){

videoHeight=videoWidth*3/4;

}

if(videoWidth==''&&videoHeight!=''){

videoWidth=videoHeight*4/3;

}

if(videoWidth==''){

videoWidth='500';

}

if(videoHeight==''){

videoHeight='450';

}

if(!isSafari){

//if(document.getElementById('ytapiplayer').style.visibility=='visible'){

if(videoUrl==''){

var sd = document.getElementById('ytapiplayer');

sd.style.visibility='hidden';

sd.style.display='none';

sd.innerHTML='';

var shimmer = document.getElementById('shimmer');

document.body.removeChild(shimmer);

}else{

var shimmer = document.createElement('iframe');

shimmer.id='shimmer';

shimmer.style.position='absolute';

// normally you would get the dimensions and

// positions of the sub div dynamically. For demo

// purposes this is hardcoded

var shimmerWidth=parseInt(videoWidth);

var shimmerHeight=parseInt(videoHeight)+20;

shimmer.style.width=''+shimmerWidth+'px';

shimmer.style.height=''+shimmerHeight+'px';

shimmer.style.top='100px'; //we will change this later

shimmer.style.left='300px';//we will change this later

shimmer.style.zIndex='999';

shimmer.setAttribute('frameborder','0');

shimmer.setAttribute('bgcolor','#000');

shimmer.setAttribute('src','javascript:false');

document.body.appendChild(shimmer);

showdeadcenterdiv(videoPosX,videoPosY,'shimmer');//curently won't show at center for this uncomment code in this function and modeify top and left postion accordinglt

// make sub div visible

var sd = document.getElementById('ytapiplayer');

sd.innerHTML='';

var resizeW=parseInt(videoWidth)-5;

var resizeH=parseInt(videoHeight)-5;

sd.style.visibility='visible';

sd.style.display='block';

sd.style.width=''+shimmerWidth+'px';

sd.style.height=''+shimmerHeight+'px';

sd.innerHTML='<span style="margin-left:'+(videoWidth-140)+'px;margin-top:0px"><a href="javascript:void(0);" onclick="fnMinMax(this,'+videoWidth+','+videoHeight+')" style="color:#FFFFFF;text-decoration:none" title="Minimize">Minimize</a> <a href="javascript:void(0);" onclick="showPopUp(\'\',\'\',\'\',\'\',\'\')" style="color:#FFFFFF;text-decoration:none">CLose</a></span><div id="resizable" style="width:'+videoWidth+'px;height:'+videoHeight+'px;top:0px;left:0px" class="ui-state-active"><iframe src="'+videoUrl+'" width="98%" height="98%" frameborder="0"></iframe> </div>';

showdeadcenterdiv(videoPosX,videoPosY,'ytapiplayer');

$("#resizable").resizable({

containment: '#ytapiplayer'

});

}

}else{

var scrolledX, scrolledY;

if( self.pageYoffset ) {

scrolledX = self.pageXoffset;

scrolledY = self.pageYoffset;

} else if( document.documentElement && document.documentElement.scrolltop ) {

scrolledX = document.documentElement.scrollLeft;

scrolledY = document.documentElement.scrolltop;

} else if( document.body ) {

scrolledX = document.body.scrollLeft;

scrolledY = document.body.scrolltop;

}

if(typeof(scrolledX)=='undefined'){

scrolledX=0;

}

if(typeof(scrolledY)=='undefined'){

scrolledY=0;

}

// Next, determine the coordinates of the center of browser's window

var centerX, centerY;

if( self.innerHeight ) {

centerX = self.innerWidth;

centerY = self.innerHeight;

} else if( document.documentElement && document.documentElement.clientHeight ) {

centerX = document.documentElement.clientWidth;

centerY = document.documentElement.clientHeight;

} else if( document.body ) {

centerX = document.body.clientWidth;

centerY = document.body.clientHeight;

}

//if(document.getElementById('ytapiplayer').style.visibility=='visible'){

if(videoUrl==''){

var sd = document.getElementById('ytapiplayer');

sd.style.visibility='hidden';

sd.style.display='none';//even one hiding will do

sd.innerHTML='';

document.getElementById('appletdiv').style.width=scrolledX+centerX;

document.getElementById('appletdiv').style.height=scrolledY+centerY;

}else{

var leftoffset = scrolledX + (centerX - videoWidth);

var topoffset = scrolledY + (centerY - videoHeight);

document.getElementById('appletdiv').style.width=leftoffset;

//document.getElementById('appletdiv').style.height=topoffset;

var sd = document.getElementById('ytapiplayer');

sd.innerHTML='';

var resizeW=parseInt(videoWidth)-5;

var resizeH=parseInt(videoHeight)-5;

sd.style.visibility='visible';

sd.style.display='block';

sd.style.width=''+videoWidth+'px';

sd.style.height=''+videoHeight+'px';

sd.innerHTML='<span style="margin-left:'+(videoWidth-60)+'px;margin-top:0px"><a href="javascript:void(0);" onclick="showPopUp(\'\',\'\',\'\',\'\',\'\')" style="color:#FFFFFF;text-decoration:none">CLose</a></span><div id="resizable" style="width:'+videoWidth+'px;height:'+videoHeight+'px;top:0px;left:0px" class="ui-state-active"><iframe src="'+videoUrl+'" width="98%" height="98%" frameborder="0"></iframe> </div>';

sd.style.top=topoffset;

sd.style.left=leftoffset;

$("#resizable").resizable({

containment: '#ytapiplayer'

});

}

}

}

//Show at ur given position

function showdeadcenterdiv(Xpos,Ypos,divid) {

//unomment code below for showing div at dead center.

try{

// First, determine how much the visitor has scrolled

/*

var scrolledX, scrolledY;

if( self.pageYoffset ) {

scrolledX = self.pageXoffset;

scrolledY = self.pageYoffset;

} else if( document.documentElement && document.documentElement.scrolltop ) {

scrolledX = document.documentElement.scrollLeft;

scrolledY = document.documentElement.scrolltop;

} else if( document.body ) {

scrolledX = document.body.scrollLeft;

scrolledY = document.body.scrolltop;

}

if(typeof(scrolledX)=='undefined'){

scrolledX=0;

}

if(typeof(scrolledY)=='undefined'){

scrolledY=0;

}

// Next, determine the coordinates of the center of browser's window

var centerX, centerY;

if( self.innerHeight ) {

centerX = self.innerWidth;

centerY = self.innerHeight;

} else if( document.documentElement && document.documentElement.clientHeight ) {

centerX = document.documentElement.clientWidth;

centerY = document.documentElement.clientHeight;

} else if( document.body ) {

centerX = document.body.clientWidth;

centerY = document.body.clientHeight;

}

// Xwidth is the width of the div, Yheight is the height of the

// div passed as arguments to the function:

var leftoffset = scrolledX + (centerX - Xwidth) / 2;

var topoffset = scrolledY + (centerY - Yheight) / 2;

// The initial width and height of the div can be set in the

// style sheet with display:none; divid is passed as an argument to // the function

*/

if(Ypos==''){

Ypos='40';

}

if(Xpos==''){

Xpos='18';

}

var o=document.getElementById(divid);

var r=o.style;

r.position='absolute';

//r.top = topoffset + 'px';

//r.left = leftoffset + 'px';

r.top = Ypos+'px';

r.left = Xpos+'px';

r.display = "block";

}catch(err){

//alert(divid);

}

}

</script>

<div id="ytapiplayer" class="ui-widget-content">

<div id="resizable" >

</div>

</div>

<div id="appletdiv" style="width:100%;height:100%">

//Your applet code here.

</applet>