views:

284

answers:

1

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <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"&gt;&lt;/script&gt;
    <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 ? ' &nbsp; ' + 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&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1"&gt;&lt;/param&gt;
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Mw3gLivJkg0&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364">
        </embed>
        </object>
    </div>
</body>
</html>
+1  A: 

Try changing the embed HTML code to this

<embed src="http://www.youtube.com/v/Mw3gLivJkg0&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364" wmode="transparent">

In browsers where the WMODE parameter is not allowed (like Opera, I think), the Movie will remain on top.

Refer to Flash content displays on top of all DHTML layers

prtksxna
Worked perfectly thanks
shinjuo