Vấn đề wmode Youtube iframe

Sử dụng javascript với jQuery, tôi đang thêm iframe bằng url youtube để hiển thị video trên trang web tuy nhiên mã nhúng được tải trong iframe từ youtube không có wmode = "Opaque", do đó các hộp modal trên trang được hiển thị bên dưới video youtube.

Bất kỳ ý tưởng làm thế nào để giải quyết vấn đề?

Hãy thử thêm ?wmode=opaquevào URL hoặc &wmode=opaquenếu đã có một tham số.

Nếu nó không hoạt động, hãy thử điều này thay vào đó, &wmode=transparentnó cũng sẽ hoạt động trong trình duyệt IE.

Hãy thử thêm ?wmode=transparentvào cuối URL. Đã làm cho tôi.

Nếu bạn đang sử dụng API không đồng bộ mới, bạn sẽ cần thêm tham số như sau:

<!-- 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
      }
    });
}

Điều này dựa trên tài liệu google và ví dụ ở đây: http://code.google.com.vn/apis/youtube/iframe_api_Vference.html

Thêm ?wmode=opaquevào URL dường như để giải quyết vấn đề này cho tôi, mặc dù tôi chưa thử nghiệm nó trong IE.

Đối với những người bạn gặp rắc rối với giải pháp được đề xuất trước đó, lưu ý rằng ký hiệu thay thế và sẽ chỉ hoạt động nếu bạn đã cung cấp các đối số khác cho URL. Đối số đầu tiên phải có dấu chấm hỏi ban đầu:http://www.example.com?first=foo&second=bar

Thêm &wmode=transparentvào url và bạn đã hoàn thành, đã thử nghiệm.

Tôi sử dụng kỹ thuật đó trong plugin wordpress của riêng mình Shortcode YouTube

Kiểm tra mã nguồn của nó nếu bạn gặp bất kỳ vấn đề.

Chỉ là một mẹo! - đảm bảo bạn tăng chỉ số z trên thành phần bạn muốn xem qua video được nhúng. Tôi đã thêm chuỗi truy vấn wmode và nó vẫn không hoạt động ... cho đến khi tôi tăng chỉ số z của phần tử khác. :)

&wmode=opaquekhông làm việc cho tôi (chrome 10) nhưng &wmode=transparentđã khắc phục vấn đề ngay.

Tôi biết đây là một câu hỏi cũ, nhưng nó vẫn xuất hiện trong các tìm kiếm hàng đầu cho vấn đề này vì vậy tôi đang thêm một câu trả lời mới để giúp những người tìm kiếm một câu hỏi cho IE:

Thêm &wmode=opaquevào cuối URL KHÔNG hoạt động trong IE 10 ...

Tuy nhiên, thêm ?wmode=opaquekhông có mẹo!

Tìm thấy giải pháp này tại đây: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

Gần đây tôi thấy rằng đôi khi trình phát flash không nhận ra &wmode=opaque, tôi cũng nên vượt qua &WMode=opaque(chú ý chữ hoa).