web-dev-qa-db-fra.com

Auto-Full Screen pour une intégration Youtube

J'ai une vidéo Youtube intégrée sur une page Web. 

Est-il possible que la vidéo passe en plein écran lorsque l'utilisateur appuie sur Lecture, à l'aide de HTML5 iframe avec l'API de Youtube ?

L'utilisation du lecteur Chromeless n'est pas une option, car le site Web est destiné aux iPad.

javascriptipadhtml5youtubeembed
19
Philip Kirkbride

Mise à jour novembre 2013 : ceci est possible - en plein écran, et non en pleine fenêtre , avec la technique suivante. Comme @chrisg le dit, l’API JS de YouTube n’a pas d’option «plein écran par défaut». 

  • Créer un bouton de lecture personnalisé
  • Utiliser l'API YouTube JS pour lire une vidéo
  • Utiliser l'API plein écran HTML5 pour rendre l'élément en plein écran

Voici le code.

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)();
  }
})
15
mikemaccana

Pour autant que je sache, cela n’est pas possible avec le code intégré youtube ou l’API javascript youtube. Vous auriez à écrire votre propre lecteur pour avoir cette fonctionnalité.

En le lisant, il semble que vous puissiez utiliser le lecteur chromeless youtube et il se redimensionnera lui-même à la largeur et à la hauteur de son élément parent.

Cela signifie que si vous utilisez le lecteur sans chrome, vous pouvez redimensionner la div avec javascript avec l'événement play déclenché. 

3
Chris G.

Non, ce n'est pas possible, pour des raisons de sécurité.

L'utilisateur final doit faire quelque chose pour lancer le plein écran.

Si vous exécutiez une application Adobe AIR, vous pouvez automatiser l'activation en plein écran sans que l'utilisateur final fasse quoi que ce soit. Mais alors ce serait une application de bureau, pas une page Web.

0
Teddy