136

jQuery で JavaScript を使用して、YouTube の URL を含む iframe を追加してウェブサイトにビデオを表示しますが、YouTube から iframe に読み込まれる埋め込みコードには wmode="Opaque" がないため、ページのモーダル ボックスが表示されます。ユーチューブ動画の下。

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

4

9 に答える 9

239

?wmode=opaqueURL に追加するか&wmode=opaque、パラメーターが既に存在する場合は試してください。

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

于 2010-11-18T03:06:21.790 に答える
81

?wmode=transparentURL の末尾に追加してみてください。私のために働いた。

于 2010-12-06T14:00:40.747 に答える
18

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

于 2012-02-21T23:10:19.317 に答える
8

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

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

于 2011-02-09T00:45:19.773 に答える
3

URLに追加&amp;wmode=transparentすると、テストが完了します。

私は自分のワードプレスプラグインYouTubeショートコードでそのテクニックを使用しています

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

于 2011-02-28T11:49:32.443 に答える
1

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

于 2012-10-17T09:03:20.427 に答える
0

これは古い質問であることは承知していますが、この問題の検索で依然として上位に表示されるため、IE 用の回答を探している人に役立つ新しい回答を追加します。

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

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

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

于 2013-08-16T20:52:31.950 に答える
0

&wmode=opaque私にはうまくいきませんでした（chrome 10）が&amp;wmode=transparent、問題を解決しました。

于 2011-03-29T17:25:41.480 に答える