Fatal编程技术网
  • javascript/
  • Javascript 花式盒子和youtube视频问题

Javascript 花式盒子和youtube视频问题

javascript html

Javascript 花式盒子和youtube视频问题,javascript,html,fancybox,Javascript,Html,Fancybox,我有一些奇特的盒子照片和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"> &

我有一些奇特的盒子照片和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>


onco施工和供应-犀牛盾
$（文档）.ready（函数（）{
$（“a[rel=example\u group]”）。fancybox({
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“标题位置”：“结束”，
“标题格式”：函数（标题、currentArray、currentIndex、currentOpts）{
返回'Image'+（currentIndex+1）+'/'+currentArray.length+（title.length？''+title:''）+''；
}
});
});
.商业
{
位置：绝对位置；
左：205px；
顶部：1175px；
宽度：327px；
高度：自动；
}
.图片
{
位置：绝对位置；
左：50px；
顶部：1090px；
宽度：750px；
高度：自动；
文本对齐：居中；
}
尝试将嵌入的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），电影将保持在顶部

请参阅

尝试将嵌入的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），电影将保持在顶部

请参阅

如何使用YouTube的新iframe嵌入模式执行此操作？@JoeCoder我不太确定，请尝试
z-index
。
wmode
是需要注意的属性。@prtksxna我认为
z-index
在这里是一个不好的选择。如何使用YouTube的新iframe嵌入模式做到这一点？@JoeCoder我不太确定，试试
z-index
。
wmode
是需要注意的属性。@prtksxna我认为
z-index
在这里是个糟糕的选择。