Comment intégrer une vidéo YouTube en lecture automatique dans un iframe?

J'essaie d'intégrer la nouvelle version iframe d'une vidéo YouTube et de la faire jouer automatiquement.

Pour autant que je sache, il n'y a aucun moyen de le faire en modifiant les drapeaux de l'URL. Existe-t-il un moyen de le faire en utilisant JavaScript et l'API?

Cela fonctionne dans Chrome mais pas Firefox 3.6 (avertissement: vidéo RickRoll):

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

L' API JavaScript pour les intégrations iframe existe, mais est toujours publiée en tant que fonctionnalité expérimentale.

MISE À JOUR: L'API iframe est maintenant entièrement prise en charge et «Création d'objets YT.Player - Exemple 2» montre comment définir la «lecture automatique» en JavaScript.

Le code intégré de YouTube a la lecture automatique désactivée par défaut. Ajoutez simplement autoplay=1à la fin de l'attribut "src". Par exemple:

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

Depuis avril 2018, Google a apporté quelques modifications à la politique de lecture automatique . Vous devrez donc faire quelque chose comme ceci:

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

Août 2018, je n'ai pas trouvé d'exemple de travail sur la mise en œuvre de l'iframe. D'autres questions étaient liées à Chrome uniquement, ce qui le trahissait un peu.

Vous devrez couper le son mute=1pour pouvoir jouer automatiquement sur Chrome. FF et IE semblent très bien fonctionner autoplay=1en utilisant comme paramètre.

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

Iframe 2014 intègre comment intégrer une vidéo YouTube avec la lecture automatique et aucune vidéo suggérée à la fin du clip

rel=0&autoplay 

Exemple ci-dessous:.

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

à la fin du iframe src, ajoutez &enablejsapi=1pour permettre à l'API js d'être utilisée sur la vidéo

puis avec jquery:

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

cela devrait lire la vidéo automatiquement sur le document.

notez que vous pouvez également l'utiliser dans une fonction de clic pour cliquer sur un autre élément pour démarrer la vidéo

Plus important encore, vous ne pouvez pas démarrer automatiquement des vidéos sur un appareil mobile, les utilisateurs devront donc toujours cliquer sur le lecteur vidéo lui-même pour démarrer la vidéo

Edit: je ne suis pas sûr à 100% du document. La iframe sera prête, car YouTube pourrait toujours charger la vidéo. J'utilise en fait cette fonction dans une fonction de 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
});

Les indicateurs ou paramètres que vous pouvez utiliser avec les intégrations IFRAME et OBJECT sont documentés ici; les détails sur quel paramètre fonctionne avec quel joueur sont également clairement mentionnés:

Lecteurs et paramètres de lecteur intégrés à YouTube

Vous remarquerez que cela autoplayest pris en charge par tous les joueurs (AS3, AS2 et HTML5).

Astuce de requêtes multiples pour ceux qui ne savent pas (passé moi et futur moi)

Si vous faites une seule requête avec l'URL, cela ?autoplay=1fonctionne comme indiqué par la réponse de mjhm

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

Si vous effectuez plusieurs requêtes, souvenez-vous que la première commence par un ?moment, le reste commence par un&

Supposons que vous souhaitiez désactiver les vidéos associées mais activer la lecture automatique ...

Cela marche

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

et ça marche

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

Mais cela ne fonctionnera pas ..

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

exemples de comparaisons

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

Plus d'informations

Lisez la réponse de NextLocal ci-dessous pour plus d'informations sur l'utilisation de plusieurs chaînes de requête

Pour que la réponse acceptée par mjhm travaille sur Chrome 66 en mai 2018, j'ai ajouté allow=autoplayà l'iframe et enable_js=1à la chaîne de requête:

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

Aujourd'hui, j'inclus un nouvel attribut "allow" sur la balise iframe, par exemple:

allow = "accéléromètre; lecture automatique; média crypté; gyroscope; image dans l'image"

Le code final est:

<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 - ajouter &enablejsapi=1àIFRAME SRC

2 - Fonction jQuery:

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

Fonctionne bien

Pour utiliser l'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>

Pour lire YouTube avec l'ID:

swfobject.embedSWF

référence: 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>

Décembre 2018,

Vous recherchez une vidéo youtube AUTOPLAY, LOOP, MUTE pour réagir.

D'autres réponses n'ont pas fonctionné.

J'ai trouvé une solution avec une bibliothèque: 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}
            />
        )
    }

}