it-swarm.com.de

Erstellen Sie Youtube-Videos im Vollbildmodus mithilfe von iframe und Javascript-API

Ich habe ein eingebettetes Youtube-Video mit ausgeblendeten Steuerelementen:

<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>

Ich kann es mit der Youtube Javascript API steuern. 

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
  }
});
}

Dinge wie player.playVideo() und so weiter funktionieren perfekt. Jetzt suche ich nach einer Möglichkeit, das Video mit einem Javascript-Aufruf im Vollbildmodus abzuspielen, aber ich konnte keine Methode in der API finden. 

Ist es überhaupt möglich (ohne die Kontrollen) und wenn ja - wie?

15
Horen

Das hat in meinem Fall perfekt funktioniert. Weitere Informationen finden Sie unter diesem Link: Demo auf 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

Sie können HTML5-Vollbild-API verwenden:

node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

Beachten Sie jedoch Folgendes:

  • dies erfordert normalerweise ein herstellerspezifisches Präfix wie mozRequestFullScreen() oder webkitRequestFullScreen.
  • requestFullScreen muss für Benutzerereignisse aufgerufen werden (wie onclick)
  • in Firefox ist der Vollbildschirm schwarz, bis der Benutzer auf "Zulassen" klickt
4
Zaffy

Ich habe Code hinzugefügt, um Vollbild (reales Vollbild, nicht Vollfenster) zu meiner Antwort auf Auto-Vollbild für eine Youtube-Einbettung zu erstellen. 

YouTube stellt den Vollbildmodus in der API nicht zur Verfügung. Sie können jedoch die native Browser-Funktion requestFullScreen () vom playerStateChange () -Ereignis aus der YouTube-API aufrufen oder Ihre eigene benutzerdefinierte Schaltfläche zum Spielen erstellen. 

4
mikemaccana

Wenn man sich die API-Referenz für den iframe-Player ansieht, glaube ich nicht, dass es möglich ist, ihn auf den Vollbildmodus zu setzen (nur mit der iframe-API). ctrl f hat den Vollbildmodus nicht gefunden. Es handelt sich also entweder um eine geheime Methode, die in der API versteckt ist oder nicht es existiert nicht Wie Sie wahrscheinlich wissen, können Sie jedoch die Größe des Players player.setSize(width:Number, height:Number):Object einstellen und dann das Fenster im Vollbildmodus erstellen.

1
hkk

Vielleicht sehen Sie sich diese ähnliche Frage an. Es sieht so aus, als könnte dies für Sie funktionieren (mit der JavaScript-Vollbild-API und nicht mit der Youtube-API):

Vollbild-Option in Chromeless Player mit Javascript?

0
David Heijl