web-dev-qa-db-fra.com

Iframe YouTube intégré - plein écran

J'ai un formulaire qui est iframed dans une page Web. Une fois le formulaire rempli, une vidéo YouTube s'affiche à partir de l'utilisation d'iframe embed.

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

Le plein écran de l'iframe imbriqué est-il limité par les dimensions de l'iframe parent?

htmliframe
61
user147215

Ajouter allowfullscreen="allowfullscreen" et modifier le type d’incorporation YouTube ont résolu le problème.

24
user147215

Si je comprends bien, vous avez un iframe qui contient un deuxième iframe (youtube).
Essayez d'ajouter l'attribut allowfullscreen à l'iframe "parent".

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

<iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe>
134
CdB

Les gens, souvenez-vous allowFullScreen et frameBorder="0"

Sans camel-case, réagit enlève ces étiquettes!

40
Funkodebat

J'ai dû ajouter l'attribut allowFullScreen à l'iframe "parent". Le cas de l'attribut est important. Je ne pense pas que Firefox ou Edge/IE11 possède un attribut allowFullScreen spécifique au navigateur. Donc, ça ressemble à quelque chose comme ça:

<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>

11
Matt Goo

En HTML5, utilisez simplement:

<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />

Cet attribut 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 cette option n'est pas définie, l'élément ne peut pas être placé en mode plein écran. Voir Mozilla Docs

Dans framework 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 ce message unira et simplifiera toutes les solutions mentionnées avec la dernière approche valide.

9
Jurosh

Le meilleure solution et le plus simple à réaliser en utilisant ce code simple:

<iframe id="player" src="URL" allowfullscreen></iframe>

Testé et fonctionne pour tous les navigateurs sans problèmes.

Je vous remercie

2
Jodyshop

J'ai trouvé une solution qui fonctionnait pour moi sur cette page grâce à une personne nommée @ orangecoat-ciallella

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

Le bouton "plein écran" ne fonctionnait pas dans mon navigateur Chrome sous 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 du thème pour la rendre> //www.youtube.com/embed/videoidhere et elle a immédiatement commencé à permettre au bouton plein écran de fonctionner.

En bref, essayez de changer le/v/en/embed/dans l'URL de YouTube si vous rencontrez un problème.

1
Jason Silver

Si l'ajout de allowfullscreen ne vous aide pas, assurez-vous que vous n'avez pas &fs=0 dans votre URL iframe.

0
zkytony