I have some fancy box photos and a youtube video, but when the fancy box picture opens the youtube video sits in front of it? Any ideas?
Here is a snippet of my code:
<!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>
<script type="text/javascript">
<!--
var newwindow;
function newWindow(url)
{
newwindow=window.open(url,'name','height=600,width=625');
if (window.focus) {newwindow.focus()}
}
// -->
</script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>onco Construction and Supply - Rhino Shield</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../style3.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
<style type="text/css">
.commercial
{
position: absolute;
left:205px;
top:1175px;
width:327px;
height:auto;
}
.pictures
{
position: absolute;
left: 50px;
top: 1090px;
width: 750px;
height: auto;
text-align: center;
}
</style>
</head>
<body>
<div class="pictures">
<a rel="example_group" href="images/rhino/1.jpg">
<img src="images/rhino/small/1.jpg" alt=""/></a>
<a rel="example_group" href="images/rhino/2.jpg">
<img src="images/rhino/small/2.jpg" alt=""/></a>
<a rel="example_group" href="images/rhino/3.jpg">
<img src="images/rhino/small/3.jpg" alt=""/></a>
<a rel="example_group" href="images/rhino/4.jpg">
<img src="images/rhino/small/4.jpg" alt=""/></a>
<a rel="example_group" href="images/rhino/5.jpg">
<img src="images/rhino/small/5.jpg" alt=""/></a>
<a rel="example_group" href="images/rhino/6.jpg">
<img src="images/rhino/small/6.jpg" alt=""/></a>
</div>
<div class="commercial">
<object width="445" height="364"><param name="movie" value="http://www.youtube.com/v/Mw3gLivJkg0&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Mw3gLivJkg0&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364">
</embed>
</object>
</div>
</body>
</html>