javascript - 嵌入式视频显示在照片库顶部

Question

所以我有一个我正在处理的网页，并且在单击代表该画廊的图像后显示图片库覆盖在网站顶部的“灯箱”效果出现问题。

http://themeanseasonband.com/media

它在我的 Mac 计算机(Safari、Chrome 和 Firefox)和我测试过的另一台 Mac 上的所有浏览器中都按预期工作。但出于某种原因，在使用相同浏览器(也包括 IE 8 和 9)的任何 Windows 计算机上，屏幕底部的视频位于灯箱的顶部。

我试验过 z-index 并包含在嵌入的视频对象中:

<param name="wmode" value="opaque" />

我曾在其他时候看到建议纠正嵌入式视频的 z-index 问题，但它不起作用。

我不确定我在这里遗漏了什么以及为什么它在 Mac 上运行，但在 Windows 上运行。

下面是一些相关的代码。上面的链接转到该特定页面，以便您可以看到它。抱歉，我尽量保持简短。

HTML

    <div id="med_photos">
        <h4 class="col_header">Photo Albums</h4>
        <ul>
            <li>
                <img src="img/photo/dec_07_11_blackcat.jpg" alt="Photos" />
                <div class="image_title">
                    <h5 class="img_title">12/7/2011 @ Black Cat</h5>
                </div>
            </li>
        </ul>
    </div>

    <div id="med_videos">
        <h4 class="col_header">Videos</h4> 
        <object class="video" width="300" height="169">
            <param name="movie" value="http://www.youtube.com/v/TCN1vYMfEls?hl=en_US&amp;version=3" />
            <param name="allowFullScreen" value="true" />
            <param name="allowscriptaccess" value="always" />
            <param name="wmode" value="opaque" />
            <embed src="http://www.youtube.com/v/TCN1vYMfEls?hl=en_US&amp;version=3" type="application/x-shockwave-flash" width="300" height="169" allowscriptaccess="always" allowfullscreen="true"></embed>
        </object>
    </div>

CSS

#med_photos {
width: 1000px;
margin: 0 0 20px 0;
padding: 0;
overflow: hidden;
border-top: 1px solid #fff;
}
#med_videos {
width: 1000px;
margin: 0 0 20px 0;
padding: 0;
border-top: 1px solid #fff;
overflow: hidden;
}
#med_photos ul {
overflow: hidden;
}
#med_photos ul li {
float: left;
list-style-type: none;
position: relative;
cursor: pointer;
display: inline;
padding: 10px;
margin: 0 25px 25px 0;
}

/*Lightbox*/

.lb_backdrop {
background: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
}
.lb_dimmer {
background: rgba(50, 50, 50, 0.7);
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;/*Will be centered later by Jquery*/
}
.lb_canvas {
background: rgba(0, 0, 0, 0.9);
width: 50px; height: 50px;
position: fixed;
top: 0; left: 0; /*Will be centered later by Jquery*/
box-shadow: 0 0 20px 5px black;
z-index: 1;
padding: 25px;
}

/*Lightbox Controls*/

.lb_controls {
width: 400px; 
background: rgba(0, 0, 0, 0.75);
position: fixed;
bottom: 10px;
color: #fff;
z-index: 5;
left: 0; right: 0; margin: 0 auto; 
}
.lb_credit {
width: 280px; 
background: rgba(0, 0, 0, 0.75);
position: fixed;
bottom: 50px;
color: #fff;
z-index: 5;
left: 0; right: 0; margin: 0 auto; 
}
.lb_credit span {
line-height: 20px;
height: 20px;
}
.lb_controls span {
line-height: 30px;
height: 30px;
}
.lb_controls span.inactive {
opacity: 0.25;
}
.lb_previous, .lb_next {
position: absolute;
top: 0;
padding: 5px 12px;
font-family: websymbols;
font-size: 14px;
background: black;
cursor: pointer;
z-index: 5;
}
.lb_previous {
left: 0;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.lb_next {
right: 0;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.lb_title {
text-align: center;
display: block;
font-size: 14px;
text-transform: uppercase;
padding: 5px 0;
font-weight: bold;
}

加载灯箱的 Javascript 部分

function loadphoto(photonum)
{
    if(lb_loading) return false;
    lb_loading= true;
    //The large image
    large_img = new Image();
    //Use data-large or the src itself if large image url is not available
    large_img.src = (gallery_dir+photonum+'.jpg');

    //Adding additional HTML - only if it hasn't been added before
    if($(".lb_backdrop").length < 1)
    {
        var lb_backdrop = '<div class="lb_backdrop"></div>';
        var lb_dimmer = '<div class="lb_dimmer"></div>';
        var lb_canvas = '<div class="lb_canvas"></div>';
        var lb_previous = '<span class="lb_previous"><</span>';
        var lb_title = '<span class="lb_title"></span>';
        var lb_next = '<span class="lb_next">></span>';
        var lb_controls = '<div class="lb_controls">'+lb_previous+lb_title+lb_next+'</div>';
        var total_html = lb_backdrop+lb_dimmer+lb_canvas+lb_controls;

        $(total_html).appendTo("body");
    }
    //Fade in lightbox elements if they are hidden due to a previous exit
    if($(".lb_backdrop:visible").length == 0)
    {
        $(".lb_backdrop, .lb_dimmer, .lb_canvas, .lb_controls, .lb_credit").fadeIn("slow");
    }

    //Display preloader till the large image loads and make the previous image translucent so that the loader in the BG is visible
    if(!large_img.complete) 
        $(".lb_canvas").addClass("loading").children().css("opacity", "0.5")

    //Disabling left/right controls on first/last items
    if(currPhoto == 1)
        $(".lb_previous").addClass("inactive");
    else
        $(".lb_previous").removeClass("inactive");
    if(currPhoto == gallery_size)
        $(".lb_next").addClass("inactive");
    else
        $(".lb_next").removeClass("inactive");

    //Centering .lb_canvas
    CW = $(".lb_canvas").outerWidth();
    CH = $(".lb_canvas").outerHeight();
    //top and left coordinates
    CL = ($(window).width() - CW)/2;
    CT = ($(window).height() - CH)/2;
    $(".lb_canvas").css({top: CT, left: CL});

    //Inserting the large image into .lb_canvas once it's loaded
    $(large_img).load(function(){
        //Recentering .lb_canvas with new dimensions
        CW = large_img.width;
        CH = large_img.height;
        //.lb_canvas padding to be added to image width/height to get the total dimensions
        hpadding = parseInt($(".lb_canvas").css("paddingLeft")) + parseInt($(".lb_canvas").css("paddingRight"));
        vpadding = parseInt($(".lb_canvas").css("paddingTop")) + parseInt($(".lb_canvas").css("paddingBottom"));
        CL = ($(window).width() - CW - hpadding)/2;
        CT = ($(window).height() - CH - vpadding)/2;

        //Animating .lb_canvas to new dimentions and position
        $(".lb_canvas").html("").animate({width: CW, height: CH, top: CT, left: CL}, 500, function(){
            //Inserting the image but keeping it hidden
            imgtag = '<img src="'+large_img.src+'" style="opacity: 0;" />';
            $(".lb_canvas").html(imgtag);
            $(".lb_canvas img").fadeTo("slow", 1);
            //Displaying the image title
            title = gallery_title+" - "+currPhoto+" of "+gallery_size
            $(".lb_title").html(title);
            lb_loading= false;
            $(".lb_canvas").removeClass("loading");
        })
    })
}

Answer 1

事实证明，我真正需要做的就是改用 iframe。由于这不适用于移动网站，我认为这对我有用。

    <div id="med_videos">
        <h4 class="col_header">Videos</h4> 
        <iframe class ="video" width="300" height="169" src="http://www.youtube.com/embed/TCN1vYMfEls?wmode=transparent" frameborder="0" allowfullscreen></iframe>
        <iframe class ="video" width="300" height="169" src="http://www.youtube.com/embed/U9Rpf8vYAlc?wmode=transparent" frameborder="0" allowfullscreen></iframe>
        <iframe class ="video" width="300" height="169" src="http://www.youtube.com/embed/zVaWFOjwLjc?wmode=transparent" frameborder="0" allowfullscreen></iframe>
    </div>