Come incorporare un video YouTube in riproduzione automatica in un iframe?

Sto cercando di incorporare la nuova versione iframe di un video di YouTube e farlo riprodurre automaticamente.

Per quanto ne so, non c'è modo di farlo modificando i flag all'URL. C'è un modo per farlo usando JavaScript e l'API?

Funziona con Chrome ma non con Firefox 3.6 (avviso: video RickRoll):

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

L' API JavaScript per gli incorporamenti iframe esiste, ma è ancora pubblicata come funzionalità sperimentale.

AGGIORNAMENTO: L'API iframe è ora completamente supportata e "Creazione di oggetti YT.Player - Esempio 2" mostra come impostare "riproduzione automatica" in JavaScript.

Il codice incorporato di YouTube ha la riproduzione automatica disattivata per impostazione predefinita. Aggiungi semplicemente autoplay=1alla fine dell'attributo "src". Per esempio:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

Da aprile 2018, Google ha apportato alcune modifiche alle Norme sulla riproduzione automatica . Quindi dovrai fare qualcosa del genere:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>

Agosto 2018 non ho trovato un esempio funzionante sull'implementazione di iframe. Altre domande riguardavano solo Chrome, che ha dato un po 'di spazio.

Dovrai disattivare l'audio mute=1per riprodurre automaticamente su Chrome. FF e IE sembrano funzionare bene usando autoplay=1come parametro.

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>

2014 iframe si basa su come incorporare un video di YouTube con riproduzione automatica e nessun video suggerito alla fine della clip

rel=0&autoplay 

Esempio di seguito:.

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

alla fine di iframe src, aggiungi &enablejsapi=1per consentire l'utilizzo dell'API js nel video

e poi con jquery:

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

questo dovrebbe riprodurre automaticamente il video su document.ready

nota che puoi anche usarlo all'interno di una funzione clic per fare clic su un altro elemento per avviare il video

Ancora più importante, non è possibile avviare automaticamente i video su un dispositivo mobile, quindi gli utenti dovranno sempre fare clic sul lettore video stesso per avviare il video

Modifica: in realtà non sono sicuro al 100% sul documento. Già l'iframe sarà pronto, perché YouTube potrebbe ancora caricare il video. In realtà sto usando questa funzione all'interno di una funzione clic:

$('.video-container').on('click', function(){
  $('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  // add other code here to swap a custom image, etc
});

I flag o i parametri che è possibile utilizzare con gli incorporamenti IFRAME e OBJECT sono documentati qui; i dettagli su quale parametro funziona con quale lettore sono anche menzionati chiaramente:

Player e parametri player incorporati di YouTube

Noterai che autoplayè supportato da tutti i giocatori (AS3, AS2 e HTML5).

Suggerimenti per domande multiple per chi non lo conosce (oltre me e futuro me)

Se stai facendo una singola query con l'URL ?autoplay=1funziona come mostrato dalla risposta di mjhm

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>

Se stai effettuando più query, ricorda che la prima inizia con un ?po ', mentre il resto inizia con a&

Supponi di voler disattivare i video correlati ma di abilitare la riproduzione automatica ...

Questo funziona

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

e questo funziona

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

Ma questi non funzioneranno ..

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>

confronti di esempio

https://jsfiddle.net/Hastig/p4dpo5y4/

Ulteriori informazioni

Leggi la risposta di NextLocal di seguito per ulteriori informazioni sull'uso di più stringhe di query

Per far sì che la risposta accettata da mjhm funzioni su Chrome 66 a maggio 2018, ho aggiunto allow=autoplayall'iframe e enable_js=1alla stringa di query:

<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

Oggi includo un nuovo attributo "consentire" sul tag iframe, ad esempio:

allow = "accelerometro; autoplay; media crittografati; giroscopio; immagine nell'immagine"

Il codice finale è:

<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1" 
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

1 - aggiungi &enablejsapi=1aIFRAME SRC

2 - jQuery func:

  $('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

Funziona bene

Per utilizzare API JavaScript,

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

Per giocare a YouTube con l'id:

swfobject.embedSWF

riferimento: https://developers.google.com/youtube/js_api_reference magazine

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
        frameborder="0" allowfullscreen></iframe>

Dicembre 2018,

Alla ricerca di un video di YouTube AUTOPLAY, LOOP, MUTE per reagire.

Altre risposte non hanno funzionato.

Ho trovato una soluzione con una libreria: reagire-youtube

class Video extends Component {

    _onReady(event) {
        // add mute
        event.target.mute();
        // add autoplay
        event.target.playVideo();
    }

    render() {
        const opts = {
            width: '100%',
            height: '700px',
            playerVars: {
                // remove video controls 
                controls: 0,
                // remove related video
                rel: 0
            }
        };

        return (
            <YouTube
                videoId="oHg5SJYRHA0"
                opts={opts}
                // add autoplay
                onReady={this._onReady}
                // add loop
                onEnd={this._onReady}
            />
        )
    }

}