Javascript 嵌入的视频显示在照片库的顶部

因此，我有一个网页，我正在工作，并有一个“灯箱”效果的问题，显示了一个图片画廊叠加在网站的顶部后，点击代表该画廊的图像

它在我的Mac电脑（Safari、Chrome和Firefox）和我测试它的另一台Mac电脑上的所有浏览器中都能正常工作。但出于某种原因，在任何一台Windows计算机上，在相同的浏览器中（也在IE8和IE9中），屏幕底部的视频都位于灯箱的顶部

我尝试过z索引，并将其包含在嵌入式视频对象中：

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

加载lightbox的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");
        })
    })
}

函数加载照片（photonum）
{
如果（lb_加载）返回false；
lb_加载=真；
//大图
大_img=新图像（）；
//如果大图像url不可用，请使用大数据或src本身
large_img.src=（gallery_dir+photonum+'.jpg'）；
//添加其他HTML-仅当以前未添加它时
如果（$（“.lb_”）。长度<1）
{
var lb_=“”；
var lb_调光器=“”；
var lb_画布=“”；
var lb_previous=''；
var lb_controls=''+lb_previous+lb_title+lb_next+''；
var total_html=lb_背景+lb_调光器+lb_画布+lb_控件；
$（总计）。附件（“正文”）；
}
//如果灯箱元素由于以前的退出而隐藏，则淡入灯箱元素
如果（$（“.lb_背景：可见”）。长度==0）
{
$（“.lb_背景，.lb_调光器，.lb_画布，.lb_控件，.lb_信用”）.fadeIn（“慢”）；
}
//显示预加载程序，直到加载大图像，并使前一个图像半透明，以便BG中的加载程序可见
如果（！大图完成）
$（“.lb_canvas”）.addClass（“加载”）.children（）.css（“不透明度”，“0.5”）
//在第一个/最后一个项目上禁用左/右控件
如果（currPhoto==1）
$（“.lb_previous”）.addClass（“非活动”）；
其他的
$（“.lb_previous”）.removeClass（“非活动”）；
如果（当前照片==画廊大小）
$（“.lb_next”）.addClass（“非活动”）；
其他的
$（.lb_next”）.removeClass（“非活动”）；
//定心.磅/平方英寸帆布
CW=$（“.lb_画布”）.outerWidth（）；
CH=$（“.lb_画布”）.outerHeight（）；
//左上角坐标
CL=（$（窗口）.width（）-CW）/2；
CT=（$（窗口）.height（）-CH）/2；
$（“.lb_canvas”）.css（{top:CT，left:CL}）；
//加载大图像后将其插入.lb_画布
$（大的）。加载（函数（）{
//使用新尺寸重新居中.lb_画布
CW=较大的img.宽度；
CH=大高度；
//.lb_画布填充添加到图像宽度/高度，以获得总尺寸
hpadding=parseInt（$（.lb_canvas”）.css（“paddingLeft”）+parseInt（$（.lb_canvas”）.css（“paddingRight”）；
vpadding=parseInt（$（“.lb_画布”）.css（“paddingTop”）+parseInt（$（“.lb_画布”）.css（“paddingBottom”）；
CL=（$（窗口）.width（）-CW-hpadding）/2；
CT=（$（窗口）.height（）-CH-vpadding）/2；
//将.lb_画布设置为新尺寸和位置的动画
$（“.lb_canvas”）.html（“”）.animate（{width:CW，height:CH，top:CT，left:CL}，500，function（）{
//插入图像但将其隐藏
imgtag=''；
$（“.lb_canvas”）.html（imgtag）；
$（“.lb_画布img”）.fadeTo（“慢速”，1）；
//显示图像标题
标题=图库标题+“-”+当前照片+“+图库大小”
$（“.lb_title”）.html（title）；
lb_加载=错误；
$（.lb_canvas”）.removeClass（“加载”）；
})
})
}

所以事实证明，我真正需要做的就是使用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>

视频

您使用的是哪个版本的windows？我已经在Windows8上用IE10进行了测试，它的工作原理与预期一致。（除了视频不显示在地铁模式，因为他们使用flash。）嗯。。。Windows7和Vista。我应该提到这一点。感谢您确认它在Windows 8中工作！

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");
        })
    })
}

    <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>