そのため、作業中のWebページがあり、そのギャラリーを表す画像をクリックした後、サイトの上にオーバーレイされた画像ギャラリーを表示する「ライトボックス」効果に問題があります。
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&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&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");
})
})
}