Wie kann ich ein automatisch abspielendes YouTube-Video in einen Iframe einbetten?

Ich versuche, die neue Iframe-Version eines YouTube-Videos einzubetten und automatisch abzuspielen.

Soweit ich das beurteilen kann, gibt es keine Möglichkeit, dies zu tun, indem Flags an der URL geändert werden. Gibt es eine Möglichkeit, dies mithilfe von JavaScript und der API zu tun?

Dies funktioniert in Chrome, aber nicht in Firefox 3.6 (Warnung: RickRoll-Video):

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

Die JavaScript-API für Iframe-Einbettungen ist vorhanden, wird jedoch weiterhin als experimentelle Funktion bereitgestellt.

UPDATE: Die iframe-API wird jetzt vollständig unterstützt und "Erstellen von YT.Player-Objekten - Beispiel 2" zeigt, wie "Autoplay" in JavaScript festgelegt wird.

Der eingebettete Code von YouTube ist standardmäßig automatisch wiedergegeben. Fügen Sie einfach autoplay=1am Ende des Attributs "src" hinzu. Beispielsweise:

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

Seit April 2018 hat Google einige Änderungen an der Autoplay-Richtlinie vorgenommen . Sie müssen also so etwas tun:

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

August 2018 Ich habe kein funktionierendes Beispiel für die Iframe-Implementierung gefunden. Andere Fragen bezogen sich nur auf Chrome, was es ein wenig verriet.

Sie müssen den Ton stummschalten, mute=1um Chrome automatisch abzuspielen. FF und IE scheinen gut zu funktionieren, wenn sie autoplay=1als Parameter verwendet werden.

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

2014 iframe einbetten, wie ein YouTube-Video mit Autoplay und ohne empfohlene Videos am Ende des Clips eingebettet wird

rel=0&autoplay 

Beispiel unten :.

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

&enablejsapi=1Fügen Sie am Ende des iframe src hinzu , damit die js-API für das Video verwendet werden kann

und dann mit jquery:

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

Dadurch sollte das Video automatisch auf document.ready abgespielt werden

Beachten Sie, dass Sie dies auch innerhalb einer Klickfunktion verwenden können, um auf ein anderes Element zu klicken und das Video zu starten

Noch wichtiger ist, dass Sie Videos auf einem mobilen Gerät nicht automatisch starten können, sodass Benutzer immer auf den Video-Player selbst klicken müssen, um das Video zu starten

Bearbeiten: Ich bin mir im Dokument nicht 100% sicher. Der Iframe ist bereits fertig, da YouTube das Video möglicherweise noch lädt. Ich benutze diese Funktion tatsächlich innerhalb einer Klickfunktion:

$('.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
});

Die Flags oder Parameter, die Sie mit IFRAME- und OBJECT-Einbettungen verwenden können, sind hier dokumentiert. Die Details darüber, welcher Parameter mit welchem ​​Player funktioniert, werden ebenfalls klar erwähnt:

Eingebettete YouTube-Player und Player-Parameter

Sie werden feststellen, dass autoplaydies von allen Playern (AS3, AS2 und HTML5) unterstützt wird.

Tipp für mehrere Abfragen für diejenigen, die es nicht wissen (Vergangenheit und Zukunft)

Wenn Sie eine einzelne Abfrage mit der URL durchführen, ?autoplay=1funktioniert dies nur wie in der Antwort von mjhm gezeigt

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

Wenn Sie mehrere Abfragen stellen, denken Sie daran, dass die erste mit einer ?Weile beginnt, der Rest mit einer&

Angenommen, Sie möchten verwandte Videos deaktivieren, aber die automatische Wiedergabe aktivieren ...

Das funktioniert

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

und das funktioniert

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

Aber diese werden nicht funktionieren ..

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

Beispielvergleiche

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

Mehr Info

Lesen Sie die Antwort von NextLocal unten, um weitere Informationen zur Verwendung mehrerer Abfragezeichenfolgen zu erhalten

Um die akzeptierte Antwort von mjhm auf Chrome 66 im Mai 2018 zu erhalten, habe ich allow=autoplaydem Iframe und enable_js=1der Abfragezeichenfolge Folgendes hinzugefügt :

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

Heutzutage füge ich ein neues Attribut "allow" in das iframe-Tag ein, zum Beispiel:

allow = "Beschleunigungsmesser; Autoplay; verschlüsselte Medien; Gyroskop; Bild-in-Bild"

Der endgültige Code lautet:

<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 - hinzufügen &enablejsapi=1zuIFRAME SRC

2 - jQuery-Funktion:

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

Funktioniert gut

Um Javascript API zu verwenden,

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

So spielen Sie das Youtube mit der ID:

swfobject.embedSWF

Referenz: 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>

Dezember 2018,

Auf der Suche nach einem YouTube-Video von AUTOPLAY, LOOP, MUTE, um zu reagieren.

Andere Antworten haben nicht funktioniert.

Ich habe eine Lösung mit einer Bibliothek gefunden: react-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}
            />
        )
    }

}