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

225

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?

472084
quelle
Gibt es eine Möglichkeit, den Ton stumm zu schalten, wenn das Video über Code
abgespielt wird?

Antworten:

423

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.

mjhm
quelle
2
Hinweis: Auf Mobilgeräten ist es möglich, dass sowohl der src-Parameter als auch der API-Aufruf aufgrund von Einschränkungen nicht funktionieren: developer.google.com/youtube/…
Linus Caldwell
Ich finde, dass auf Mobilgeräten (Webview unter Android 5.0) die Funktion onYouTubeIframeAPIReady()nicht ausgelöst wird. Hat jemand eine Lösung?
Jemand irgendwo
2
Gibt es eine Möglichkeit, den Ton stumm zu schalten, wenn das Video über Code
abgespielt wird?
6
Möglicherweise benötigen Sie auch: allow = "autoplay" für Ihren iFrame
Jeffz
40

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>
Waheed ur Rehman
quelle
2
?autoplay=1zum src hinzufügen
Squirrl
1
ja eigentlich autoplay = 1 während? Geben Sie an, dass src Parameter wie Farbe, Steuerelemente und jeweils durch & -Zeichen getrennt haben kann. Eine detaillierte Beschreibung finden Sie hier. developer.google.com/youtube/player_parameters#Parameters
Waheed ur Rehman
35

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>
MatayoshiMariano
quelle
14

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>
Tim Vermaelen
quelle
12

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

rel=0&amp;autoplay 

Beispiel unten :.

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

&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
});
Bdanin
quelle
1
Diese Antwort zu verwenden und den jQuery-Selektor in einen setTimeoutfür mich funktionierenden einzuschließen.
tyler.frankenstein
1
Das gleiche gilt hier, feuere das Ereignis einfach mehrmals pro Sekunde ab und es wird funktionieren.
Matthias Kleine
6

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.

Salman A.
quelle
6

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

Hastig Zusammenstellen
quelle
1
Der Grund, warum Ihre nicht funktioniert hat, ist, dass Sie bereits ?rel=0dort waren. Wenn Sie das entfernt hätten, hätte es funktioniert. Weitere Informationen zur Syntax von Abfragezeichenfolgen finden Sie hier, wenn Sie möchten. ?rel=0?autoplay=1sollte entweder ?autoplay=1oder?rel=0&autoplay=1
jaggedsoft
@NextLocal Danke, ich werde darauf zurückkommen und meine Antwort bearbeiten / löschen, wenn ich das nächste Mal an etwas arbeite, das YouTube-Videos iframes.
Hastig Zusammenstellen
Das Beispiel, das Sie bereitstellen, wird http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1definitiv nicht funktionieren, https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1sollte aber
jaggedsoft
@NextLocal Ha, ich habe es jetzt. Ich bin mir nicht sicher, wie ich das nicht bemerkt habe: D Nochmals vielen Dank.
Hastig Zusammenstellen
Gibt es eine Möglichkeit, den Ton stumm zu schalten, wenn das Video über Code
abgespielt wird?
3

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>
MattAllegro
quelle
2

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>
Jonas WebDev
quelle
funktioniert ein Trick! Ich konnte nicht herausfinden, warum das Laden von Seiten das Video nur manchmal und nicht zu anderen Zeiten zeigte!
Shaneonabike
1

1 - hinzufügen &enablejsapi=1zuIFRAME SRC

2 - jQuery-Funktion:

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

Funktioniert gut

Gabriel Morais
quelle
In meinem Fall funktioniert es über die Konsole oder wenn ich bereits manuell mit dem Video interagiert habe. Funktioniert nicht unter Last, auch wenn die Zeit abgelaufen ist
mate.gwozdz
0

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

HTML5-Entwickler
quelle
0
<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>
George Sariev
quelle
0

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}
            />
        )
    }

}
Davide Carpini
quelle