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>
