Masalah wmode iframe Youtube

136

Menggunakan javascript dengan jQuery, saya menambahkan iframe dengan url youtube untuk menampilkan video di situs web namun kode sematan yang dimuat di iframe dari youtube tidak memiliki wmode = "Opaque", oleh karena itu kotak modal di halaman ditampilkan di bawah video youtube.

Ada ide bagaimana mengatasi masalah ini?

iframe youtube wmode

— seperti ular
sumber

Apakah ini masih menjadi masalah? Saya menggunakan solusi ini sebelumnya tetapi tidak dapat mereproduksi masalah asli di Chrome / Firefox / IE terbaru.

— marcovtwout

238

Coba tambahkan ?wmode=opaqueke URL atau &wmode=opaquejika sudah ada parameter.

Jika tidak berhasil, coba ini sebagai gantinya, &wmode=transparentyang akan berfungsi di browser IE juga.

— Shabith
sumber

1

bagus! berfungsi di firefox & chrome tetapi untuk beberapa alasan tidak berfungsi di IE ... ada ide?

— danfromisrael

31

coba gunakan & amp; wmode = transparent sebagai gantinya

— Shabith

29

Setelan "& amp; wmode = xxxx" mengasumsikan bahwa Anda telah meneruskan parameter di URL. Saya tidak berada dalam kasus saya, jadi saya perlu menambahkan "? Wmode = xxxx" ke URL.

— Matt Huggins

6

Perbedaan antara opaquedantransparent . opaqueseharusnya lebih berkinerja.

— donat

3

Shabith - "wmode = Opaque" harus "wmode = opaque" (huruf kecil 'o')

— Yohanes

81

Coba tambahkan ?wmode=transparentdi akhir URL. Bekerja untuk saya.

— Casper
sumber

'Transparan' harus menjadi opsi yang lebih disukai menurut saya.

— Foxinni

18

Jika Anda menggunakan API asinkron baru, Anda perlu menambahkan parameter seperti ini:

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

Ini didasarkan pada dokumentasi google dan contohnya di sini: http://code.google.com/apis/youtube/iframe_api_reference.html

— Sturgeon plastik
sumber

7

Perhatikan bahwa ini JUGA membutuhkan wmode di playerVars. Jika hanya di bawah YT.Player, ini hanya akan berfungsi untuk pemutar HTML5. Menambahkan wmode ke playerVars juga mengirimkan parameter itu ke objek Flash, yang memiliki masalah urutan-z sendiri. Lihat di sini: groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/… Saya akan mengedit jawaban Anda sebagaimana mestinya.

— Dylan McCall

1

Saya mencoba ini dan tidak berhasil. Saya juga tidak menemukan referensi apa pun ke wmode di dokumentasi YouTude.

— sboisse

Tautan berubah sejak saya pertama kali memposting, seperti halnya metode untuk mengatur wmode. Anda dapat mengatur parameter flash sekarang atau parameter pemutar youtube melalui playerVars. Saya telah memperbarui contoh di atas.

— Plastic Sturgeon

Memuat seluruh API hanya untuk mengubah nilai yang dapat dengan mudah diubah di URL adalah tindakan berlebihan. Jangan gunakan ini.

— fregante

Ada beberapa dari kita yang bekerja dengan pemutar chromeless dan sudah menggunakan JS API untuk mengontrol UI. Bagi kami, solusi ini benar-benar luar biasa! Terima kasih

— maxijb

8

Menambahkan ?wmode=opaqueke URL tampaknya menyelesaikan masalah ini bagi saya, meskipun saya belum mengujinya di IE.

Bagi Anda yang mengalami masalah dengan solusi yang diusulkan sebelumnya, perhatikan bahwa inital ampersand hanya akan berfungsi jika Anda sudah memasukkan argumen lain ke URL. Argumen pertama harus memiliki tanda tanya awal:http://www.example.com?first=foo&second=bar

— Markus Amalthea Magnuson
sumber

Saya awalnya mendapatkan persegi panjang hitam terlepas dari video yang saya coba tunjukkan .. ternyata mesin uji tidak menginstal flash dan dialog untuk menginstal flash diimbangi terlalu banyak!

— Zeb

3

Tambahkan &wmode=transparentke url dan Anda selesai, diuji.

Saya menggunakan teknik itu di shortcode YouTube plugin wordpress saya

Periksa kode sumbernya jika Anda mengalami masalah apa pun.

— Túbal Martín
sumber

Menambahkan & amp; wmode = transparent setelah URL tabung Anda Memecahkan masalah di semua peramban. Terima kasih untuk Tuan Tubal,

1

Hanya tip! - pastikan Anda menaikkan indeks-z pada elemen yang Anda inginkan di atas video yang disematkan. Saya menambahkan querystring wmode, dan itu masih tidak berfungsi ... sampai saya menaikkan indeks-z dari elemen lainnya. :)

— Tyson Phalp
sumber

0

&wmode=opaquetidak berhasil untuk saya (chrome 10) tetapi &wmode=transparentmenyelesaikan masalah dengan benar.

— imjared
sumber

0

Saya tahu ini adalah pertanyaan lama, tetapi masih muncul di pencarian teratas untuk masalah ini jadi saya menambahkan jawaban baru untuk membantu mereka yang mencari satu untuk IE:

Menambahkan &wmode=opaqueke akhir URL TIDAK berfungsi di IE 10 ...

Namun, menambahkan berhasil ?wmode=opaque!

Temukan solusi ini di sini: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

— Amber June
sumber

&dan ?keduanya benar bergantung pada urutan penggunaannya dan pengaturan lain mana yang disertakan dalam URL. Jelas ?digunakan jika ini adalah pengaturan pertama (atau satu-satunya), &jika tidak.

— Alex

Ya, tetapi IE memiliki kebutuhan khusus. Coba saja dan lihat mana yang berfungsi di IE 10 dan mana yang tidak. Saya belum mencoba ini di IE 11.

— Amber Juni

0

Baru-baru ini saya melihat bahwa kadang-kadang flash player tidak mengenali &wmode=opaque, tetapi Anda harus lulus &WMode=opaquejuga (perhatikan huruf besar).

— Nereo Costacurta
sumber