web-dev-qa-db-ja.com

iframeとjavascript APIを使用してYouTubeビデオをフルスクリーンにします

私は隠されたコントロールで埋め込まれたYouTubeのビデオを持っています：

_<iframe id="ytplayer" type="text/html" width="400" height="225"
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer"
frameborder="0" allowfullscreen></iframe>
_

Youtube Javascript APIで制御できます。

_var tag = document.createElement('script');

tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}
_

player.playVideo()などのようなものは完全に機能します。現在、Javascript呼び出しを使用してビデオをフルスクリーンモードで再生する方法を探していますが、APIにメソッドが見つかりませんでした。

コントロールなしでも可能ですか？可能であれば-方法は？

javascriptyoutubeyoutube-api
16
Horen

私の場合、これは完璧に機能しました。このリンクで詳細を確認できます。 CodePenのデモ

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}
4
Alkindus

Html5フルスクリーンAPIを使用できます。

_node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool
_

ただし、次のことに注意してください。

  • これには通常、mozRequestFullScreen()やwebkitRequestFullScreenなどのベンダー固有のプレフィックスが必要です。
  • requestFullScreenは、ユーザーイベント（onclickなど）で呼び出す必要があります
  • firefoxでは、ユーザーが[許可]をクリックするまでフルスクリーンは黒になります。
4
Zaffy

Youtube埋め込みの自動全画面表示 の回答に全画面表示（実際の全画面表示ではなく、全画面表示）するコードを追加しました。

YouTubeはAPIでフルスクリーンを公開しませんが、YouTube APIのplayerStateChange（）イベントからネイティブブラウザーのrequestFullScreen（）関数を呼び出すか、独自のカスタム再生ボタンを作成できます。

4
mikemaccana

iframeプレーヤーのAPIリファレンスを見ると、フルスクリーンに設定することはできないと思います（iframe AP​​Iのみで）-_ctrl f_はフルスクリーンを見つけられませんでした、したがって、API内に隠された秘密のメソッドであるか、存在しません。ただし、おそらくご存知のように、プレーヤーのサイズplayer.setSize(width:Number, height:Number):Objectを設定し、 window fullscreen にすることができます。

1
hkk

この類似の質問をご覧ください。これはあなたのために働くかもしれないように見えます（Youtube APIではなくjavascript fullscreen APIを使用します）：

Javascriptを使用するChromelessプレーヤーの全画面オプション？

0
David Heijl