23

「質問」というより「答え」ですが、他の場所でこれを見つけられなかったので、ここに投稿します。

私は、IE と Firefox のすべてのバージョンで iFrame API を初期化するのに苦労していました。基本的に、API をロードしますが、プレーヤー オブジェクトは作成しません。

少し試行錯誤した後div、オブジェクトに渡していた ID の CSS 可視性が に設定されていたため、機能していないことがわかりました'none'。'visible'全体に設定すると、うまくいきました。その後、divCSS を'display:none'(アプリでは、ユーザーが要求するまでビデオを非表示にする必要がありました) に設定しようとしましたが、これにより iFrame API がサイレントに失敗しました (コールバックはありません'onPlayerReady')。

簡単に言うと、YouTube iFrame API をdiv使用して後で非表示にしたい を初期化する場合は、絶対配置などの CSS 手法を使用して、後で必要になるまで画面から押し出します。また、プレーヤー オブジェクトが初期化'onPlayerReady'されて呼び出されると、1 日中ディスプレイのオンとオフを切り替えることができ、すべてが期待どおりに機能することがわかりました。

4

2 に答える 2

1

プレーヤーのコンテナを空のままにしておく必要があります。

<div class="myPlayerContainer"></div>

表示したい場合は、コンテナに追加するだけです：

$('#showVideoBtn').click(function(){
    $('.myPlayerContainer').show().append('~ code of youtube iframe ~');
});
于 2013-05-28T09:55:32.897 に答える
1

Yotamは正しいです、次を見てください：

HTML:

<button onclick="toggleYoutube();">show / hide</button>
<div id="youtube"></div>

JS (jQuery を使用):

var visible = false;
function toggleYoutube() {
    visible = !visible;
    if ( visible ) {
        $("#youtube").append( '<iframe id="video" width="640" height="360" src="http://www.youtube-nocookie.com/embed/cjvIeNt93nc?rel=0" frameborder="0" allowfullscreen></iframe>' );
    } else {
        $("#video").remove();
    }
}

http://jsfiddle.net/wFVhT/2/で完全なコードを参照してください。

于 2013-05-28T16:33:51.477 に答える