web-dev-qa-db-ja.com

Youtube埋め込みの自動フルスクリーン

YoutubeビデオをWebページに埋め込みました。

YoutubeのAPIを使用したHTML5 iframe を使用して、ユーザーが再生ボタンを押したときにビデオを全画面表示することは可能ですか？

ウェブサイトはiPad向けであるため、Chromelessプレーヤーを使用することはできません。

javascriptipadhtml5youtubeembed
20
Philip Kirkbride

2013年11月更新：これは可能です-フルウィンドウではなく、実際のフルスクリーン、次の手法を使用します。 @chrisgが言うように、YouTube JS APIには「デフォルトで全画面表示」オプションがありません。

  • カスタム再生ボタンを作成する
  • YouTube JS APIを使用してビデオを再生する
  • HTML5フルスクリーンAPIを使用して、要素をフルスクリーンにします

コードは次のとおりです。

var $ = document.querySelector.bind(document);

// Once the user clicks a custom fullscreen button
$(playButtonClass).addEventListener('click', function(){
  // Play video and go fullscreen
  player.playVideo();

  var playerElement = $(playerWrapperClass);
  var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(playerElement)();
  }
})
16
mikemaccana

私の知る限り、これはyoutube埋め込みコードまたはyoutube javascript APIでは不可能です。この機能を使用するには、独自のプレーヤーを作成する必要があります。

読み取りを行うと、chromeless youtubeプレーヤーを使用できるように見え、親要素の幅と高さに合わせてサイズが変更されます。

つまり、クロムレスプレーヤーを使用する場合、playイベントがトリガーされるjavascriptでdivのサイズを変更できます。

3
Chris G.

いいえ、セキュリティ上の懸念により、これは不可能です。

エンドユーザーは、フルスクリーンを開始するために何かをする必要があります。

Adobe AIRアプリケーションを実行する場合、エンドユーザーが何もしなくてもフルスクリーンアクティベーションを自動化できます。ただし、Webページではなくデスクトップアプリケーションになります。

0
Teddy