web-dev-qa-db-ja.com

Youtube iframe wmodeの問題

JQueryでjavascriptを使用して、youtube URLでiframeを追加してWebサイトにビデオを表示していますが、youtubeからiframeに読み込まれる埋め込みコードにはwmode = "Opaque"がないため、ページのモーダルボックスが表示されますyoutubeビデオの下。

問題を解決する方法はありますか？

iframeyoutubewmode
133
snakeyyy

?wmode=opaqueをURLに追加するか、既にパラメーターがある場合は&wmode=opaqueを追加してみてください。

動作しない場合は、代わりにIEブラウザでも動作する&wmode=transparentを試してください。

238
Shabith

?wmode=transparentをURLの最後に追加してみてください。私のために働いた。

81
Casper

新しい非同期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

18
Plastic Sturgeon

?wmode=opaqueをURLに追加すると、IEでまだテストしていませんが、この問題は解決したようです。

以前に提案された解決策で問題がある場合は、URLに既に他の引数を指定している場合にのみ、最初のアンパサンドが機能することに注意してください。最初の引数には最初の疑問符が必要です：http://www.example.com?first=foo&second=bar

8
Markus Amalthea Magnuson

&amp;wmode=transparentをURLに追加すれば、テストは完了です。

私は自分のwordpressプラグインでその手法を使用しています YouTubeショートコード

問題が発生した場合は、ソースコードを確認してください。

3
Túbal Martín

ちょっとしたヒント！-埋め込み動画の上に配置したい要素のz-indexを確認してください。 wmodeクエリ文字列を追加しましたが、まだ機能しませんでした...他の要素のz-indexを上げるまで。 :)

1
Tyson Phalp

最近、フラッシュプレーヤーが&wmode=opaqueを認識しない場合がありますが、代わりに&WMode=opaqueも渡す必要があります（大文字に注意してください）。

0
Nereo Costacurta

&wmode=opaqueは機能しませんでした（chrome 10）が、&amp;wmode=transparentは問題をすぐに解決しました。

0
imjared

私はこれが古い質問であることを知っていますが、この問題の上位の検索でまだ出てきているので、IEのために探している人を助けるために新しい答えを追加しています：

IE 10で&wmode=opaqueをURLの最後に追加しても機能しません...

ただし、?wmode=opaqueを追加するとうまくいきます！

ここでこのソリューションを見つけました： http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

0
Amber Blahnik