12

YouTube iframe 埋め込みプレーヤーを使用して、プログラムでフルスクリーンをトリガーする方法はありますか? デフォルトのコントロール (controls=0 を使用) を削除したいのですが、カスタム フルスクリーン ボタンを単独で作成する機能が必要です。

4

3 に答える 3

4

iframe をフルスクリーンではなくフルページにします:

    function fullscreen() {
        var vid = document.getElementById("vid");
        vid.style.position = "absolute";
        vid.style.width = "100vw";
        vid.style.height = "100vh";
        vid.style.top = "0px";
        vid.style.left = "0px";
        document.getElementById("exit").style.display = "inline";
    }
    function exitfullscreen() {
      var vid = document.getElementById("vid");
      vid.style.position = "";
      vid.style.width = "";
      vid.style.height = "";
      vid.style.top = "";
      vid.style.left = "";
      document.getElementById("exit").style.display = "none";
    }
<iframe width="560" height="315" src="https://www.youtube.com/embed/fq6qcvfZldE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" id="vid" allowfullscreen></iframe>
    <button onClick="fullscreen()">Fullscreen</button>
    <button style="position: fixed; 
                   bottom: 5px; 
                   right: 5px; 
                   display: none;
                   z-index: 2000;" id="exit" onClick="exitfullscreen()">Exit Fullscreen</button>

full pageコード スニペットの右上隅にあるボタンもこのように機能します。ブラウザを全画面表示にしたい場合は を試すことができますがdocument.requestFullscreen();、これはまだ実験的なものであり、ごく少数のブラウザで動作します。この関数のMDNトピックを見てください。

編集: これを見つけました: https://developers.google.com/youtube/?csw=1#player_apis、公式の YouTube プレーヤー API。

于 2015-05-09T16:05:15.140 に答える
1

Webkit ブラウザで次のことを試してください。

if (typeof iframe.webkitRequestFullScreen === 'function') {
    button.addEventListener('click', function () {
        iframe.webkitRequestFullScreen();
    }, false);
}

これは、ユーザーのジェスチャー (この場合は「クリック」) なしでは機能しないことに注意してください。

于 2015-05-11T20:02:11.853 に答える
0

iframe プレーヤーの代わりに、このライブラリXCDYouTubeKitを使用できます。
その非常にシンプルで強力です。フルスクリーンと非フルスクリーンをサポートします。

于 2015-12-28T10:56:41.847 に答える