Integrazione di iframe YouTube: schermo intero

Ho un modulo che è iframed in una pagina web. Al completamento del modulo, viene visualizzato un video di YouTube dall’uso di iframe embed.

Quando accedo alla modalità a schermo intero del video di YouTube, non succede nulla.

Lo schermo intero dell’iframe nidificato è vincolato dalle dimensioni dell’iframe principale?

Se ho capito bene hai un iframe che contiene un secondo iframe (quello di youtube).
Prova ad aggiungere l’attributo allowfullscreen “parent”.

Per il supporto completo del browser dovrebbe assomigliare a questo:

  

React.JS People, ricorda allowFullScreen e frameBorder="0"

Senza cammello, reagisci tagliando queste etichette!

L’aggiunta di allowfullscreen = “allowfullscreen” e la modifica del tipo di embed di YouTube hanno risolto il problema.

Ho dovuto aggiungere attributo allowFullScreen all’iframe “parent”. Il caso dell’attributo è importante. Non penso che Firefox o Edge / IE11 abbiano un attributo allowFullScreen specifico per il browser. Quindi sembra qualcosa del genere:

In HTML5, usa semplicemente:

  

Questo attributo può essere impostato su true se il frame può essere inserito in modalità a schermo intero chiamando il metodo Element.requestFullscreen() . Se questo non è impostato, l’elemento non può essere posizionato in modalità a schermo intero. Vedi Mozilla Docs

Nel framework React.js utilizzare la proprietà allowFullScreen .

Nota che ci sono più risposte che puntano a direzioni diverse, quindi spero che questo post si unisca e semplifichi tutti quelli citati con l’ultimo approccio valido.

Ho trovato una soluzione che ha funzionato per me su questa pagina grazie a qualcuno di nome @ orangecoat-ciallella

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

Il pulsante “a schermo intero” non funzionava nel mio browser Chrome su Ubuntu.

Stavo usando il modulo media_youtube per D6. Nell’iframe stava usando un URL video del modello //www.youtube.com/v/videoidhere.

Ho usato la funzione di preelaborazione dei temi per renderla in uscita> //www.youtube.com/embed/videoidhere e ha immediatamente iniziato a consentire il funzionamento del pulsante a schermo intero.

In breve, prova a modificare / v / to / embed / nell’URL di YouTube se riscontri un problema.

L’inserimento dopo l’iframe esterno più interno dall’iframe nidificato ha risolto il problema per me.

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

Sono riuscito a trovare un modo relativamente pulito per farlo. Per vederlo funzionante, fai clic sulla mia pagina Web: http://developersfound.com/yde-portfolio.html e passa il mouse sopra il link “Demo di YouTube”.

Di seguito sono riportati due snippet per mostrare come questo può essere fatto abbastanza facilmente:

Ho raggiunto questo objective con un iFrame. Supponendo che questo DOM sia ‘yde-home.html’ Qual è la fonte del tuo iFrame.

    iFrame Container      

Supponiamo che questo sia il DOM che carica l’iFrame.

      Full Screen Youtube        

Ho anche controllato questo contro il validatore W3c e convalida un HTML5 senza errori.

È anche importante notare che: gli URL incorporati di YouTube a volte controllano se la richiesta proviene da un server, quindi potrebbe essere necessario impostare l’ambiente di test per ascoltarlo sul tuo IP esterno. Quindi potrebbe essere necessario configurare il port forwarding sul router per far funzionare questa soluzione. Una volta impostato il port forwarding, prova solo dall’IP esterno invece di LocalHost. Ricorda che alcuni router necessitano di port forwarding da LocalHost / loopback, ma la maggior parte usa lo stesso IP che hai usato per accedere al router. Ad esempio, se la pagina di accesso del router è 192.168.0.1, il port forwarder dovrà utilizzare 192.168.0.? dove ? potrebbe essere qualsiasi numero inutilizzato (potrebbe essere necessario sperimentare). Da questo indirizzo si aggiungerebbero le porte da cui il vostro ambiente di test ascolterà (normalmente 80, 81, 8080 o 8088).