javascript - 花式盒子和youtube视频问题

我有一些精美的照片和youtube视频，但是当精美图片打开时，youtube视频位于它的前面吗？有任何想法吗？

这是我的代码片段：

<!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 ? ' &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&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>

最佳答案

尝试将嵌入的HTML代码更改为此

<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" wmode="transparent">

在不允许使用WMODE参数的浏览器中（我认为是Opera），电影将保持在最前面。

请参阅Flash content displays on top of all DHTML layers

关于javascript - 花式盒子和youtube视频问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3034612/

Youtube视频

javascript - 花式盒子和youtube视频问题