web-dev-qa-db-fra.com

Rendre la vidéo youtube en plein écran en utilisant iframe et javascript API

J'ai une vidéo youtube intégrée avec des contrôles cachés:

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

Je peux le contrôler avec l'API javascript youtube. 

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

Des choses comme player.playVideo() et ainsi de suite fonctionnent parfaitement. Maintenant, je cherche un moyen de faire jouer la vidéo en mode plein écran avec un appel Javascript, mais je n'ai trouvé aucune méthode dans l'API. 

Est-ce même possible (sans les contrôles) et si oui - comment?

javascriptyoutubeyoutube-api
15
Horen

Cela a fonctionné parfaitement dans mon cas. Vous pouvez trouver plus de détails sur ce lien: démo sur 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

Vous pouvez utiliser l'API plein écran html5:

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

Mais notez que:

  • cela nécessite généralement un préfixe spécifique au fournisseur, tel que mozRequestFullScreen() ou webkitRequestFullScreen
  • requestFullScreen doit être appelé lors d'événements utilisateur (comme onclick)
  • dans Firefox, le plein écran sera noir jusqu'à ce que l'utilisateur clique sur "Autoriser".
4
Zaffy

J'ai ajouté du code permettant de faire du plein écran (réel en plein écran, et non en pleine fenêtre) à ma réponse sur Auto-Plein écran pour une intégration YouTube . 

YouTube n'expose pas le plein écran dans leur API, mais vous pouvez appeler la fonction requestFullScreen () du navigateur natif à partir de l'événement playerStateChange () à partir de l'API YouTube ou créer votre propre bouton de lecture personnalisé, comme moi. 

4
mikemaccana

En regardant la référence de l'API pour le lecteur iframe, je ne pense pas qu'il soit possible de la définir en plein écran (avec l'API iframe seule) - ctrl f n'a pas trouvé le mode plein écran. n'existe pas. Cependant, comme vous le savez probablement, vous pouvez définir la taille du lecteur player.setSize(width:Number, height:Number):Object, puis afficher le window en plein écran .

1
hkk

Peut-être jeter un oeil à cette question similaire. Il semble que cela puisse fonctionner pour vous (en utilisant l’API fullscreen javascript plutôt que l’API Youtube):

Option plein écran dans le lecteur sans chrome utilisant Javascript?

0
David Heijl