IE 嵌入 iframe 無視 z-index

IE8 在嵌入 youtube 影片的時候，嵌入的 ifame 會無視 z-index 的排序，所以當頁面有個下拉選單就在影片上方，下拉時，可能就會被這個 iframe 擋住選項，就算你對下拉選單使出黑魔法 z-index: 9999 !important，這個 iframe 還是會臉不紅氣不喘的擋住選項…

google 了一下在 iframe 上加入 wmode 參數可解，詳情請參考這裡

$(document).ready(function (){
   $(‘iframe’).each(function(){
       var url = $(this).attr(“src”);
       $(this).attr(“src”,url+“?wmode=transparent”);
   });
});

但是！！！

如果你遇到嵌入的 youtube 影片不僅僅是個影片，是個播放清單的時候，用上述的方式加入 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);
   });
});

然後我原本以為這東西只會在 IE8 遇到，因為當時測試了win7 IE11 並沒有遇到這個問題，但沒想到過幾天，有人測試發現會遇到跟 IE8 一樣的問題。抽絲剝繭之後發現，我原先測試的版本是 win7 IE11 18XXX 版本，確實不會有這個 z-index 問題，但是在 win7 IE11 17XXX 和 16XXX （推測 18XXX 以下版本可能都有這個問題吧…）卻有這個 z-index 的問題。

那就…改判斷式，保險起見讓 IE 家族都加上 wmode 參數好了…(._.a)

第一次知道會有這種隔代遺傳的 bug…IE 總是能讓我跪下