jQuery的嵌入YouTube的IE問題

我一直在努力的自定義圖像滑塊這裏的特色：jQuery的嵌入YouTube的IE問題

JQuery的

$(function(){ 
     $('.cont:gt(0)').hide(); 
     $("#parent").on("mouseenter", ".extraContent div", function(){ 
      var ind = $(this).index(); 
      $("#parent").find(".cont").stop().fadeTo(600,0,function(){ 
       $('#parent').find('.cont').eq(ind).stop().fadeTo(300,1); 
      }); 
     }); 
     $('#parent .extraContent').on('click',function(){ 
      window.location=$(this).find("a").attr("href"); 
      return false; 
     }); 
    });

CSS

#parent { width:400px; margin:auto} 
.mainContent { width:430px; height:300px; border:1px solid #000;padding:5px; } 
.extraContent {overflow:auto; width:450px;} 
.extraContent div{float:left; width:90px; height:90px; border:1px solid #00F; margin:5px; padding:5px } 
.extraContent div:hover { border:1px solid #0F0;cursor:pointer } 
.cont{ 
    position:absolute; 
}

HTML

<div id="parent"> 
    <div class="mainContent"> 
     <div class="cont"> Content 1....</div> 
     <div class="cont"> Content 2....</div> 
     <div class="cont">Content 3...<br /><iframe width="267" height="200" src="http://www.youtube.com/embed/6tlQn7iePV4?rel=0" frameborder="0" allowfullscreen></iframe></div> 
     <div class="cont"> Content 4....</div> 
    </div> 
    <div class="extraContent"> 
     <div><p>1 Custom content here <br /> <a href="">Some link</a></p></div> 
     <div><p>2 Custom content here <br /> <a href="">Some link</a></p></div> 
     <div><p>3 Custom content here <br /> <a href="">Some link</a></p></div> 
     <div><p>4 Custom content here <br /> <a href="">Some link</a></p></div> 
    </div> 
</div>

我的問題如果我嵌入YouTube視頻聖使用那裏iframe它在網站上使用iframe過渡罰款，但火狐& IE瀏覽器只是直接顯示視頻和每個幻燈片/ div出現在視頻下，這是一個已知的問題，並沒有人知道我可以得到的方式IE & FF來表現。

p.s.因爲這將在內容管理系統中，用戶可以嵌入視頻的唯一方式是使用YouTube上的默認代碼。

FIDDLE HERE

來源

2012-10-25 webmonkey237

這是一個衆所周知的問題，我把它稱爲「超級的z-index」。這是一個閃光相關的問題。如果您使用HTML5播放器，則不會發生。基本上，你必須設置一個參數在您的YouTube網址：

http://www.youtube.com/embed/6tlQn7iePV4?rel=0&amp;wmode=transparent 
               ^--------------------^

順便說一句，如果你想保持你的標記清理您可以使用此snnipet，將改變你的Youtube鏈接到iframe中，包括Z-索引修復。

function embedYoutube(link, ops) { 

    var o = $.extend({ 
    width: 480, 
    height: 320, 
    params: '' 
    }, ops); 

    var id = /\?v\=(\w+)/.exec(link)[1]; 

    return '<iframe style="display: block;"'+ 
    ' class="youtube-video" type="text/html"'+ 
    ' width="' + o.width + '" height="' + o.height + 
    ' "src="http://www.youtube.com/embed/' + id + '?' + o.params + 
    '&amp;wmode=transparent" frameborder="0" />'; 
}

更多關於它的信息on this article。

來源

2012-10-25 22:55:45 elclanrs

jQuery的嵌入YouTube的IE問題

回答

相關問題