Pages

熱門文章

2012年12月6日

置入Youtube 影片z-index 在IE中失效

有時候我們會需要在網頁上置入youtube的影片
但如果因為layout設計的關係,要在youtube影片上面再壓圖或是文字說明
在IE中,(又是IE..攤手)不管z-index設多高
都無法蓋過去
這是因為youtube的flash播放器沒有設定wmode的關係
所以我們要自己加上wmode的設定
(關於wmode的屬性可以看這裡的說明)
我在網路上找到這一篇國外的文章有說明如何解決
如果是用youtube iframe直接置入影片的方法,解決方法如下

1.在網址的後面加上?wmode=opaque就可以,如下面的語法
<iframe width="560" height="315" src="http://www.youtube.com/embed/Jwmdqqz1cf8?wmode=opaque" frameborder="0" allowfullscreen></iframe>


2.使用jQuery將所有iframe加上wmode屬性

第一個方式適用沒有使用參數的youtube播放
$(function(){
     $("iframe").each(function(){
      var ifr_source = $(this).attr('src');
      var wmode = "?wmode=opaque";
      $(this).attr('src',ifr_source+wmode);
     });
});


那...假設我要加參數呢?
以下有兩個方法可以選擇

將wmode的參數加在所有參數最後面
$(function(){
     $("iframe").each(function(){
      var ifr_source = $(this).attr('src');
      var wmode = "wmode=opaque";";
      if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
      else $(this).attr('src',ifr_source+'?'+wmode);
     });
});


將wmode的參數加在所有參數的最前面
$(function(){
     $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=opaque";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});

2 則留言:

  1. 最近在做專案的時候,也一直無法解決這個問題
    但剛剛使用eRic大大的方法, 在ie10上還是無法順利瀏覽
    再google了一下
    http://php.quicoto.com/how-to-fix-z-index-in-youtube-iframes/
    下面的訪客留言說 可以加“&”
    &wmode=transparent
    就ok了!!!
    但不曉得是為何!?!

    回覆刪除
  2. 感謝分享,而且這問題只有在ie才會有,還好有看到您的文章解決了

    回覆刪除