Wie binde ich ein YouTube-Video mit automatischer Wiedergabe in einen Iframe ein?

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

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

2014 iframe einbetten, wie man ein YouTube-Video mit Autoplay einbettet und keine vorgeschlagenen Videos am Ende des Clips

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>

fügen Sie am Ende von iFrame src &enablejsapi=1 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 in Bezug auf das Dokument nicht 100% sicher. Bereits ist der Iframe fertig, da YouTube das Video möglicherweise noch lädt. Ich benutze diese Funktion tatsächlich in 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
});

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

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

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

Wenn Sie mehrere Anfragen stellen, denken Sie daran, dass die erste mit einem ? beginnt, während der Rest mit einem & beginnt.

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/

weitere Infos

Weitere Informationen zur Verwendung mehrerer Abfragezeichenfolgen finden Sie in der Antwort von NextLocal

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 deutlich erwähnt:

Eingebettete YouTube-Player und Player-Parameter

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

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 mute=1 stummschalten, um die automatische Wiedergabe in Chrome zu ermöglichen. FF und IE scheinen einwandfrei zu funktionieren, wenn autoplay=1 als Parameter verwendet wird.

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

Damit mjhm die akzeptierte Antwort im Mai 2018 auf Chrome 66 bearbeitet, habe ich allow=autoplay zum iframe und enable_js=1 zur Abfragezeichenfolge hinzugefügt:

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

1 - &enablejsapi=1 zu IFRAME SRC hinzufügen

2 - jQuery-Funktion:

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

Funktioniert gut

Dezember 2018,

Auf der Suche nach einem AUTOPLAY, LOOP, MUTE Youtube-Video zum 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}
            />
        )
    }

}

So verwenden Sie Javascript-API,

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

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