วิดีโอ YouTube ฝังผ่าน iframe ละเว้น z-index หรือไม่

ฉันกำลังพยายามใช้เมนูการนำทางแบบเลื่อนลงหลายระดับในแนวนอน ด้านล่าง (แนวตั้ง) เมนูฉันมีวิดีโอ YouTube ฝังผ่าน iframe หากฉันวางเมาส์เหนือรายการนำทางระดับหลักรายการใดรายการหนึ่งใน Firefox เมนูแบบเลื่อนลงจะปรากฏที่ด้านบนของวิดีโอ อย่างถูกต้อง

อย่างไรก็ตามใน Chrome และ IE9 จะมีเพียงเศษเสี้ยวของเมนูแบบเลื่อนลงเท่านั้นที่มองเห็นได้ในพื้นที่เล็ก ๆ ที่ฉันมีระหว่างเมนูและ iframe ส่วนที่เหลือดูเหมือนว่าจะอยู่หลัง iframe

ปัญหาน่าจะเกี่ยวข้องกับวิดีโอ YouTube ไม่ใช่ iframe ในการทดสอบฉันเล็ง iframe ไปที่เว็บไซต์อื่นแทนที่จะเป็นวิดีโอและเมนูแบบเลื่อนลงก็ทำงานได้ดีแม้ใน IE

• คำถามที่ 1: WTF?
• คำถามที่ 2: ทำไมแม้ว่าฉันจะใส่z-index:-999 !important; iframe อย่างชัดเจนปัญหานี้ก็ยังคงเกิดขึ้น

มี CSS ภายในบางส่วนที่โค้ดฝังของ YouTube รวมอยู่ด้วยซึ่งกำลังลบล้างสิ่งต่างๆหรือไม่?

ลองเพิ่ม wmode ดูเหมือนว่าจะมีพารามิเตอร์สองตัว

&wmode=Opaque

&wmode=transparent

ฉันไม่พบเหตุผลทางเทคนิคว่าทำไมมันถึงใช้งานได้หรือคำอธิบายอื่น ๆ อีกมากมาย แต่ลองดูที่ข้อความค้นหานี้

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

หรือนี่

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

คำตอบของJoshc มาถูกทางแล้ว แต่ฉันพบว่ามันลบ?rel=0สตริงการสืบค้นทั้งหมดและแทนที่ด้วย?wmode=transparentรายการซึ่งมีผลในการแสดงรายการวิดีโอแนะนำของ YouTube เมื่อสิ้นสุดการเล่นแม้ว่าคุณจะไม่ได้ทำ ไม่ต้องการให้สิ่งนี้เกิดขึ้น

ฉันเปลี่ยนรหัสเพื่อให้srcสแกนแอตทริบิวต์ของวิดีโอที่ฝังไว้ก่อนเพื่อดูว่ามีเครื่องหมายคำถาม?อยู่แล้วหรือไม่ (เนื่องจากสิ่งนี้แสดงถึงการมีอยู่ของสตริงการสืบค้นที่มีอยู่แล้วซึ่งอาจเป็นสิ่งที่คล้ายกัน?rel=0แต่อาจเป็นไปได้ในทางทฤษฎี เป็นอะไรก็ได้ที่ YouTube เลือกที่จะต่อท้ายในอนาคต) หากมีสตริงข้อความค้นหาอยู่แล้วเราต้องการเก็บรักษาไว้ไม่ทำลายมันเพราะแสดงถึงการตั้งค่าที่เลือกโดยใครก็ตามที่วางในวิดีโอ YouTube นี้และพวกเขาก็น่าจะเลือกด้วยเหตุผล!

ดังนั้นหาก?พบสิ่งwmode=transparentนี้จะถูกต่อท้ายโดยใช้รูปแบบ: &mode=transparentเพียงแค่ติดแท็กที่ส่วนท้ายของสตริงการสืบค้นที่มีอยู่แล้ว

หากไม่?พบรหัสจะทำงานในลักษณะเดียวกับที่ทำในตอนแรก (ในโพสต์ของtoomanyairmiles ) โดยต่อท้าย?wmode=transparentเป็นสตริงข้อความค้นหาใหม่ใน URL

ตอนนี้ไม่ว่าสิ่งใดที่อาจจะเป็นหรือไม่อยู่ในส่วนท้ายของ URL ของ YouTube เป็นสตริงการค้นหาอยู่แล้วก็ยังคงรักษาไว้และwmodeพารามิเตอร์ที่จำเป็นจะถูกแทรกหรือเพิ่มโดยไม่เกิดความเสียหายกับสิ่งที่เคยมีมาก่อน

นี่คือรหัสที่จะวางลงในdocument.readyฟังก์ชันของคุณ:

$('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"
    });
  }
});

เพียงเพิ่มหนึ่งในสองสิ่งนี้ใน 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>

ฉันมีปัญหาเดียวกันใน iframe ของ YouTube ที่ฝังไว้ใน internet explorer เท่านั้น

ดัชนี Z ถูกละเว้นโดยสิ้นเชิงหรือวิดีโอแฟลชเพิ่งปรากฏที่ดัชนีสูงสุดที่เป็นไปได้

นี่คือสิ่งที่ฉันใช้โดยปรับสคริปต์ jquery ด้านบนเล็กน้อย

รหัสฝังของฉันส่งตรงจาก YouTube ...

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

jQuery เล็กน้อยที่ดัดแปลงมาจากคำตอบข้างต้น ...

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

โดยทั่วไปหากคุณไม่เลือกแสดงวิดีโอแนะนำเมื่อวิดีโอจบในการตั้งค่าการฝังคุณจะมี?rel=0ที่ท้าย"src"URL ของคุณ ดังนั้นฉันจึงเพิ่มบิตแทนที่ในกรณีที่?rel=0มีอยู่ มิฉะนั้น?wmode=transparentจะไม่ทำงาน

เราสามารถเพิ่ม?wmode=transparentต่อท้าย URL ของ YouTube ได้ สิ่งนี้จะบอกให้ YouTube รวมวิดีโอเข้ากับชุด wmode ดังนั้นโค้ดฝังตัวใหม่ของคุณจะมีลักษณะดังนี้: -

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

มีเพียงอันนี้เท่านั้นที่ใช้ได้กับฉัน:

<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>

ฉันโหลดในไฟล์ footer.php Wordpress พบรหัสในความคิดเห็นที่นี่ (ขอบคุณ Gerson)

wmode = ทึบแสงหรือโปร่งใสที่จุดเริ่มต้นของสตริงข้อความค้นหาของฉันไม่ได้แก้ปัญหาอะไรเลย ปัญหานี้สำหรับฉันเกิดขึ้นเฉพาะใน Chrome และไม่เกิดขึ้นกับคอมพิวเตอร์ทุกเครื่อง ซีพียูเพียงตัวเดียว มันเกิดขึ้นใน vimeo ฝังเช่นกันและอาจเป็นไปได้อื่น ๆ

วิธีแก้ปัญหาของฉันในการแนบไปกับเหตุการณ์ 'แสดง' และ 'ซ่อน' ของโมดอล bootstrap ที่ฉันใช้เพิ่มคลาสที่ตั้งค่า iframe เป็น 1x1 พิกเซลและลบคลาสเมื่อโมดอลปิด ดูเหมือนว่าจะใช้งานได้และใช้งานง่าย

คำตอบที่ได้รับไม่ได้ผลสำหรับฉันจริงๆฉันมีเหตุการณ์คลิกบนกระดาษห่อหุ้มและกล่าวคือ 7,8,9,10 ไม่สนใจดัชนี z ดังนั้นการแก้ไขของฉันจึงทำให้กระดาษห่อหุ้มเป็นสีพื้นหลังและมันก็ทำงานได้ในทันที . แม้ว่ามันจะถูกสมมติว่าโปร่งใสดังนั้นฉันจึงกำหนดกระดาษห่อหุ้มด้วยสีพื้นหลังสีขาวแล้วจึงมีความทึบ 0.01 และตอนนี้ก็ใช้งานได้แล้ว ฉันมีฟังก์ชั่นข้างต้นด้วยดังนั้นจึงอาจรวมกันได้

ฉันไม่รู้ว่าทำไมมันถึงได้ผลฉันแค่มีความสุขกับมัน

โค้ด Javascript ของ BigJacko ใช้ได้ผลสำหรับฉัน แต่ในกรณีของฉันฉันต้องเพิ่มโค้ด JQuery "noconflict" ก่อน นี่คือเวอร์ชันแก้ไขที่ใช้ได้กับไซต์ของฉัน:

<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>

สิ่งที่คุณต้องการใน iframe คือ:

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

และใน URL:

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