Nội dung video YouTube bao gồm các menu thả xuống CSS trong IE <9

Question

Tôi đã tạo các menu thả xuống bằng CSS và tôi có một video YouTube được đặt trong hộp ngay bên dưới thanh điều hướng của tôi. Khi sử dụng IE 8, trình đơn thả xuống nằm phía sau video YouTube, mặc dù thực tế rằng div với thanh điều hướng có chỉ số z cao hơn so với div với video trên YouTube. Vấn đề không tồn tại trong Firefox, Safari hoặc IE9.

Bạn có thể thấy vấn đề bằng cách vào trang web:

http://www.mensdiscipleshipnetwork.com

Thanks for the help.

Answer 1

Có vẻ như bạn cần thêm ?wmode=transparent vào URL nhúng iframe src url. Cũng giống như vậy:

<iframe width="632" height="390" src="http://www.youtube.com/embed/_K-YwgCyg70?wmode=transparent" frameborder="0" allowfullscreen></iframe> 

Answer 2

Bạn có thể thêm tham số mà tự động cho tất cả các iframe src như vậy:

$(document).ready(function() 
    { 
     $('iframe').each(function() 
     { 
       var url = $(this).attr("src"); 
       var char = "?"; 
       if(url.indexOf("?") != -1) 
         var char = "&"; 

       $(this).attr("src",url+char+"wmode=transparent"); 
     }); 
    }); 

Answer 3

Nếu bạn đang sử dụng nhúng, wmode cần phải được một thuộc tính chứ không phải là một phần của URL wmode="transparent"

Answer 4

Nếu bạn đang sử dụng API iframe bạn có thể thêm nó như thế này (lưu ý các param cuối cùng trong playerVars đối tượng):

player = new YT.Player(playerID, 
     { 
      width: '100%', 
      height: '100%', 
      videoId: vidID, 
      playerVars: { 
       controls: 2, 
       autohide: 1, 
       showinfo: 0, 
       modestbranding: 1, 
       wmode: 'transparent' 
      } 
     });