Video YouTube được nhúng qua iframe Bỏ qua chỉ mục z?

Tôi đang cố gắng thực hiện một menu điều hướng thả xuống đa cấp ngang. Ngay bên dưới (theo chiều dọc) menu, tôi đã có một video YouTube được nhúng qua iframe. Nếu tôi di chuột qua một trong các mục điều hướng cấp chính trong Firefox, menu thả xuống sẽ xuất hiện đúng trên đầu video.

Tuy nhiên, trong Chrome và IE9, chỉ có một phần nhỏ của danh sách thả xuống được hiển thị trong vùng không gian nhỏ mà tôi có giữa menu và iframe. Phần còn lại của nó dường như nằm phía sau iframe.

Vấn đề dường như có liên quan đến video YouTube, không phải iframe. Để kiểm tra, tôi đã nhắm iframe vào một trang web khác chứ không phải video và menu thả xuống hoạt động tốt, ngay cả trong IE.

• Câu 1: WTF?
• Câu hỏi 2: Tại sao, ngay cả khi tôi khám phá đặt một z-index:-999 !important; iframe thì vấn đề này vẫn xảy ra?

Có một số CSS nội bộ mà mã nhúng YouTube bao gồm phần nào đó đang ghi đè lên mọi thứ?

Hãy thử thêm wmode, nó dường như có hai tham số.

&wmode=Opaque

&wmode=transparent

Tôi không thể tìm thấy lý do kỹ thuật tại sao nó hoạt động, hoặc giải thích nhiều hơn nhưng hãy xem truy vấn này .

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

hoặc cái này

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Câu trả lời của Joshc đã đi đúng hướng, nhưng tôi thấy rằng nó hoàn toàn xóa ?rel=0chuỗi truy vấn và thay thế nó bằng ?wmode=transparentmục - có tác dụng hiển thị danh sách Video được đề xuất của YouTube khi kết thúc phát lại, mặc dù ban đầu bạn không làm thế t muốn điều này xảy ra

Tôi đã thay đổi mã để srcthuộc tính của video được nhúng trước tiên được quét, để xem đã có dấu chấm hỏi ?chưa (vì điều này biểu thị sự hiện diện của chuỗi truy vấn đã tồn tại trước đó, có thể giống như ?rel=0trên lý thuyết là bất cứ điều gì YouTube chọn để nối thêm trong tương lai). Nếu đã có một chuỗi truy vấn ở đó, chúng tôi muốn giữ lại nó, không phá hủy nó, bởi vì nó đại diện cho một cài đặt được chọn bởi bất kỳ ai đã dán trong video YouTube này và có lẽ họ đã chọn nó vì lý do!

Vì vậy, nếu ?được tìm thấy, wmode=transparentsẽ được thêm vào bằng cách sử dụng định dạng: &mode=transparentchỉ gắn thẻ nó vào cuối chuỗi truy vấn có sẵn.

Nếu không ?tìm thấy, thì mã sẽ hoạt động chính xác theo cách ban đầu (trong bài đăng của toomanyairmiles ), nối thêm ?wmode=transparentnhư một chuỗi truy vấn mới vào URL.

Bây giờ, bất kể những gì có thể có hoặc không có ở cuối URL YouTube dưới dạng chuỗi truy vấn, nó vẫn được giữ nguyên và các wmodetham số bắt buộc được tiêm hoặc thêm mà không làm hỏng những gì đã có trước đó.

Đây là mã để thả vào document.readychức năng của bạn :

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});

Chỉ cần thêm một trong hai vào url src:

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Tôi có cùng một vấn đề trên iframe YouTube chỉ nhúng trong trình duyệt internet explorer.

Chỉ số Z đã bị bỏ qua hoàn toàn hoặc video flash chỉ xuất hiện ở chỉ số cao nhất có thể.

Đây là những gì tôi đã sử dụng, điều chỉnh nhẹ kịch bản jquery ở trên.

Mã nhúng của tôi, trực tiếp từ YouTube ...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

JQuery hơi thích nghi với câu trả lời trên ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

Về cơ bản nếu bạn không chọn Hiển thị video được đề xuất khi video kết thúc trong cài đặt nhúng của mình, bạn có một ?rel=0đoạn cuối "src"url. Vì vậy, tôi đã thêm bit thay thế trong trường hợp ?rel=0tồn tại. Nếu không ?wmode=transparentsẽ không làm việc.

Chúng tôi chỉ đơn giản có thể thêm ?wmode=transparentvào cuối URL YouTube. Điều này sẽ bảo YouTube bao gồm video với bộ wmode. Vì vậy, mã nhúng mới của bạn sẽ trông như thế này: -

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

Chỉ cái này làm việc cho tôi:

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

Tôi tải nó trong tập tin Wordpress footer.php. Mã được tìm thấy trong bình luận ở đây (cảm ơn Gerson)

wmode = mờ đục hoặc trong suốt ở đầu chuỗi truy vấn của tôi không giải quyết được gì. Vấn đề này đối với tôi chỉ xảy ra trên Chrome và không phải trên tất cả các máy tính. Chỉ cần một cpu. Nó xảy ra trong vimeo nhúng là tốt, và có thể những người khác.

Giải pháp của tôi để gắn vào sự kiện 'hiển thị' và 'ẩn' của các mô-đun bootstrap tôi đang sử dụng, thêm một lớp đặt iframe thành 1x1 pixel và xóa lớp khi đóng chế độ. Có vẻ như nó hoạt động và đơn giản để thực hiện.

Các câu trả lời không thực sự hiệu quả với tôi, tôi đã có một sự kiện nhấp chuột trên trình bao bọc và tức là 7,8,9,10 đã bỏ qua chỉ số z, vì vậy cách khắc phục của tôi là tạo cho trình bao bọc màu nền và tất cả đều bất ngờ hoạt động . Mặc dù nó được cho là trong suốt, vì vậy tôi đã xác định trình bao bọc với màu trắng nền, và sau đó độ mờ 0,01, và bây giờ nó hoạt động. Tôi cũng có các chức năng trên, vì vậy nó có thể là một sự kết hợp.

Tôi không biết tại sao nó hoạt động, tôi chỉ hạnh phúc nó làm.

Mã Javascript của BigJack hoạt động với tôi, nhưng trong trường hợp của tôi, trước tiên tôi phải thêm một số mã "noconflict" của JQuery. Đây là phiên bản sửa đổi hoạt động trên trang web của tôi:

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

Tất cả những gì bạn cần trên iframe là:

...wmode="opaque"></iframe>

và trong URL:

http://www.youtube.com/embed/123?wmode=transparent