2010-06-14 156 views
0

我有一些花哨的框照片和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> 
+0

沒有人有任何想法? – shinjuo 2010-06-14 03:19:14

回答

4

嘗試改變嵌入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

+0

非常感謝 – shinjuo 2010-06-14 19:33:34

+1

如何使用YouTube的新iframe嵌入模式進行此操作? – Dwayne 2012-10-07 20:20:09

+0

@JoeCoder我不太確定,試試'z-index'。 'wmode'是值得注意的地方。 – prtksxna 2012-12-29 10:44:15