置入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);
    });
});