Hi,

I am having a few issues with a site at the moment which is at www.thecellists.co.uk

The problem is that when you click the small video icon at the bottom right of the home page, it is supposed to seamlessly fade in a div holding the video (which it does do some of the time). Sometimes the background of the body tag goes a strange pattern of white and the original color, but I cant see why its only happening some of the time.

I have taken a screenshot for you to see and put it up at www.thecellists.co.uk/bgproblem.png




the Javascript is:

Code:
function bigvideohome()    //brings video to the front and makes it visible
{
	$('#container').animate({opacity:'.2'}, {duration:500});
	setTimeout(function(){$('#container').css("z-index","-1")},500);	
	
	setTimeout(function(){$('#bigvideodiv').css("z-index","1")},500);
	setTimeout(function(){$('#bigvideodiv').animate({opacity:'1'}, {duration:500})},500);	
}

function exitvideo() {
	
	var video = document.getElementById("homevideo");

	if(video.paused == true){
			$('#bigvideodiv').animate({opacity:'0'}, {duration:500});
			setTimeout(function(){$('#bigvideodiv').css("z-index","-1")},500);	
	
			setTimeout(function(){$('#container').css("z-index","1")},500);
			setTimeout(function(){$('#container').animate({opacity:'1'}, {duration:500})},500);
	}
	else{
			video.pause();
			video.currentTime = 0;
			
			$('#bigvideodiv').animate({opacity:'0'}, {duration:500});
			setTimeout(function(){$('#bigvideodiv').css("z-index","-1")},500);	
	
			setTimeout(function(){$('#container').css("z-index","1")},500);
			setTimeout(function(){$('#container').animate({opacity:'1'}, {duration:500})},500);
	}

}





the CSS relevant is :

Code:
#bigvideodiv {
	position:absolute;
	width:862px;
	height:490px;
	left:50%;
	top:100px;
	margin-left:-432px;
	opacity:0;
	border-style:solid;
	border-width:1px;
	border-color:#FFFFFF;
	z-index:-1;
}
#homevideo {
	position:relative;
	left:5px;
	top:5px;
	z-index:5;
}	
#exitbigvideo {
	position:absolute;
	left:50%;
	margin-left:-30px;
	top:-25px;
	z-index:10;		
}



and the html relevant is :




Code:
<?php 
    include("includes/checkos.php")
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Cellists - Music for Weddings, Corporate Events and Functions</title>


<!--attached files-->
<?php 
    include("includes/attachedfiles.html")
?>




<?php 
    include("includes/connect.php")
?>

</head>

<body>


<!--Container Div-->  <!--All elements except the big video are held inside this-->
<div id="container">

<!--Header Div-->
<?php 
    include("includes/header.html")
?>

<!--Nav Div-->
<?php 
    include("includes/nav/navhome.html")
?>
   
   
   
   
   
   
    
<!--Content Space Div-->
<div id="contentspace">

<!--EDITABLE REGION START-->




	<img src="images/homeimage.png" id="homeimage" border="0" />
    <div id="hometext">
    
<!--get variable containing content from the database-->
<?php

if(!$cxn)
{
die("couldnt connect to the database");
}
else
{

//concerts
$query = "SELECT * FROM home";
$result = mysqli_query($cxn,$query) 	or die("cant connect");

$row = mysqli_fetch_assoc($result);

$content = $row['content'];

echo nl2br("$content");
}

?>
    
    </div>
    
    <a href="#" onclick="bigvideohome();"><img src="images/videopic.png" id="videopic" border="0" /></a>

    
    
<!--EDITABLE REGION END-->
    
</div>	
  
  
  
  
  
    
<!--Footer Div-->
<?php 
    include("includes/footer.html")
?>	

<!--replist view and download Div-->
<?php 
    include("includes/replist.html")
?>	


<!--Close  container div-->
</div>

<!--create div that holds the hidden big video outside of the container-->
<div id="bigvideodiv">
    
    <!--replacement image
    <img id="videoreplacement" src="images/videoreplacement.jpg" border="0" height="619" width="1100" />
    -->
     <a href="#" onclick="exitvideo();"><img id="exitbigvideo" src="images/exitbigvideo.png" border="0" height="60" width="60" /></a>

    


		<video id='homevideo' controls  poster='video/home.jpg' width='852' height='480' title='the cellists'>
        	<source src='video/home.mp4' type='video/mp4'/>
            <source src='video/home.webm' type='video/webm'/>
			<source src='video/home.ogv' type='video/ogg'/>
		</video>



       
</div>

</body>
</html>


Thanks for any help you can give

Fraser