ปัญหา wmode iframe ของ Youtube

การใช้ javascript กับ jQuery ฉันกำลังเพิ่ม iframe ที่มี url ของ youtube เพื่อแสดงวิดีโอบนเว็บไซต์ แต่โค้ดฝังตัวที่โหลดใน iframe จาก youtube ไม่มี wmode = "Opaque" ดังนั้นกล่องโมดอลในหน้าจึงแสดงขึ้น ใต้วิดีโอ youtube

มีความคิดอย่างไรในการแก้ปัญหา?

ลองเพิ่ม?wmode=opaqueURL หรือ&wmode=opaqueหากมีพารามิเตอร์อยู่แล้ว

หากไม่ได้ผลให้ลองใช้วิธีนี้แทน&wmode=transparentซึ่งจะทำงานในเบราว์เซอร์ IE เช่นกัน

ลองเพิ่ม?wmode=transparentที่ท้าย URL ทำงานให้ฉัน

หากคุณใช้ API แบบอะซิงโครนัสใหม่คุณจะต้องเพิ่มพารามิเตอร์ดังนี้:

<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
    console.log("onYouTubePlayerAPIReady" + initialVideo);
    player = new YT.Player('player', {
      height: '381',
      width: '681',
      wmode: 'transparent', // SECRET SAUCE HERE
      videoId: initialVideo,      
       playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

นี่เป็นไปตามเอกสารของ Google และตัวอย่างที่นี่: http://code.google.com/apis/youtube/iframe_api_reference.html

การเพิ่ม?wmode=opaqueURL ดูเหมือนจะช่วยแก้ปัญหานี้ให้ฉันได้แม้ว่าฉันจะยังไม่ได้ทดสอบใน IE

สำหรับผู้ที่คุณมีปัญหากับโซลูชันที่เสนอก่อนหน้านี้โปรดทราบว่าเครื่องหมายแอมเพอร์แซนด์ inital จะใช้งานได้ก็ต่อเมื่อคุณจัดหาอาร์กิวเมนต์อื่น ๆ ให้กับ URL แล้ว อาร์กิวเมนต์แรกต้องมีเครื่องหมายคำถามเริ่มต้น:http://www.example.com?first=foo&second=bar

เพิ่ม&wmode=transparentลงใน url และทดสอบเสร็จแล้ว

ฉันใช้เทคนิคนั้นในปลั๊กอิน WordPress รหัสย่อYouTubeของฉันเอง

ตรวจสอบซอร์สโค้ดหากคุณพบปัญหาใด ๆ

เคล็ดลับ! - ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มดัชนี z ในองค์ประกอบที่คุณต้องการให้อยู่เหนือวิดีโอที่ฝังไว้ ฉันเพิ่มสตริงแบบสอบถาม wmode แล้ว แต่ก็ยังใช้ไม่ได้ ... จนกว่าฉันจะเพิ่ม z-index ขององค์ประกอบอื่น :)

&wmode=opaqueไม่ได้ผลสำหรับฉัน (chrome 10) แต่&wmode=transparentแก้ไขปัญหาได้ทันที

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ก็ยังคงปรากฏในการค้นหาอันดับต้น ๆ สำหรับปัญหานี้ดังนั้นฉันจึงเพิ่มคำตอบใหม่เพื่อช่วยผู้ที่กำลังมองหา IE:

การเพิ่ม&wmode=opaqueต่อท้าย URL ใช้ไม่ได้ใน IE 10 ...

อย่างไรก็ตามการเพิ่ม?wmode=opaqueเคล็ดลับ!

พบโซลูชันนี้ที่นี่: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

เมื่อเร็ว ๆ นี้ฉันเห็นว่าบางครั้งโปรแกรมเล่นแฟลชไม่รู้จัก&wmode=opaqueคุณก็ควรผ่าน&WMode=opaqueเช่นกัน (สังเกตตัวพิมพ์ใหญ่)