YouTube iframe incorporer – plein écran

J’ai un formulaire qui est iframed dans une page Web. Une fois le formulaire terminé, une vidéo YouTube s’affiche à partir de l’intégration d’iframe.

Lorsque j’entre en mode plein écran de la vidéo YouTube, rien ne se passe vraiment.

Le plein écran du iframe nested est-il limité par les dimensions de l’iframe parent?

Si je comprends bien, vous avez un iframe qui contient un deuxième iframe (celui de youtube).
Essayez d’append l’atsortingbut allowfullscreen à l’iframe “parent”.

Pour un support complet du navigateur, cela devrait ressembler à ceci:

  

Personnes React.JS, rappelez-vous allowFullScreen et frameBorder="0"

Sans casier, réagissez à ces étiquettes!

L’ajout de allowfullscreen = “allowfullscreen” et la modification du type d’intégration YouTube ont résolu mon problème.

J’ai dû append l’atsortingbut allowFullScreen à l’iframe “parent”. Le cas de l’atsortingbut a de l’importance. Je ne pense pas que Firefox ou Edge / IE11 possèdent un atsortingbut allowFullScreen spécifique au navigateur. Donc, ça ressemble à ceci:

En HTML5, utilisez simplement:

  

Cet atsortingbut peut être défini sur true si le cadre est autorisé à être placé en mode plein écran en appelant sa méthode Element.requestFullscreen() . Si ce n’est pas défini, l’élément ne peut pas être placé en mode plein écran. Voir les documents de Mozilla

Dans la structure React.js, utilisez la propriété allowFullScreen .

Notez qu’il y a plus de réponses pointant vers des directions différentes, alors espérons que cet article s’unira et simplifiera tout ce qui est mentionné avec la dernière approche valide.

J’ai trouvé une solution qui a fonctionné pour moi sur cette page grâce à quelqu’un nommé @ orangecoat-ciallella

https://www.drupal.org/node/1807158

Le bouton “plein écran” ne fonctionnait pas dans mon navigateur Chrome sur Ubuntu.

J’utilisais le module media_youtube pour D6. Dans l’iframe, il utilisait une URL de vidéo du modèle //www.youtube.com/v/videoidhere.

J’ai utilisé la fonction de prétraitement de thème pour la rendre> //www.youtube.com/embed/videoidhere et elle a immédiatement permis au bouton plein écran de fonctionner.

En bref, essayez de changer l’adresse URL de / v / to / embed / dans YouTube si vous rencontrez un problème.

L’insertion de l’iframe le plus externe depuis l’iframe nested a résolu le problème pour moi.

 var outerFrame = parent.parent.parent.$('.mostOuterFrame'); parent.$('', { src: 'https://www.youtube.com/embed/BPlsqo2bk2M' }).attr({'allowfullscreen':'allowfullscreen', 'frameborder':'0' }).addClass('youtubeIframe') .css({ 'width':'675px', 'height':'390px', 'top':'100px', 'left':'280px', 'z-index':'100000', 'position':'absolute' }).insertAfter(outerFrame); 

J’ai réussi à trouver un moyen relativement simple de le faire. Pour le voir fonctionner, cliquez sur ma page Web: http://developersfound.com/yde-portfolio.html et passez le curseur sur le lien «Youtube Demos».

Voici deux extraits pour montrer comment cela peut être fait assez facilement:

J’ai réalisé cela avec un iFrame. En supposant que ce DOM est «yde-home.html», qui est la source de votre iFrame.

 < !DOCTYPE html>   iFrame Container      

Supposons que ce soit le DOM qui charge l’iFrame.

 < !DOCTYPE html>     Full Screen Youtube        

J’ai également vérifié cela contre le validateur W3c et valide un HTML5 sans erreur.

Il est également important de noter que: Les URL incorporées sur Youtube vérifient parfois si la requête provient d’un serveur. Il peut donc être nécessaire de configurer votre environnement de test pour qu’il écoute sur votre adresse IP externe. Vous devrez donc peut-être configurer le transfert de port sur votre routeur pour que cette solution fonctionne. Une fois que vous avez configuré le transfert de port, testez simplement depuis l’IP externe au lieu de LocalHost. Rappelez-vous que certains routeurs nécessitent le transfert de port à partir de LocalHost / loopback, mais la plupart utilisent la même adresse IP que celle utilisée pour vous connecter au routeur. Par exemple, si la page de connexion de votre routeur est 192.168.0.1, le port forward doit utiliser 192.168.0. où ? pourrait être n’importe quel numéro inutilisé (vous devrez peut-être expérimenter). A partir de cette adresse, vous appendez les ports que votre environnement de test écoutera (normalement 80, 81, 8080 ou 8088).