YouTube Iframe intégrer la lecture automatique

Le code intégré de youtube est désactivé 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>

2014 iframe embed sur la façon d'intégrer une vidéo youtube avec 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 de l'iframe src, ajoutez &enablejsapi=1 pour permettre l'utilisation de L'API js sur la vidéo

Et 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.prêt

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 les vidéos sur un appareil mobile, de sorte que les utilisateurs devront toujours cliquer sur le lecteur vidéo lui-même pour démarrer la vidéo

Modifier: Je suis en fait pas sûr à 100% Sur le document.prêt l'iframe sera prêt, car YouTube pourrait toujours charger la vidéo. J'utilise réellement 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 flags , ou les paramètres que vous pouvez utiliser avec iframe et object embeds sont documentés ici; les détails sur quel paramètre fonctionne avec quel lecteur sont également clairement mentionnés:

Lecteurs intégrés YouTube et paramètres du Lecteur

Vous remarquerez que autoplay est 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 juste ?autoplay=1 fonctionne 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, rappelez-vous que la première commence par un ? tandis que le reste commence par un &

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

Cela fonctionne

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

Et cela fonctionne

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

Mais ce ne sera pas le cas travail..

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

Exemple de comparaisons

Https://jsfiddle.net/Hastig/p4dpo5y4/

Plus d'infos

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

Depuis avril 2018, Google a apporté quelques modifications à la Politique de lecture automatique . Donc, vous devrez faire quelque chose comme ceci:

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

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 le youtube avec l'id:

swfobject.embedSWF

Référence: https://developers.google.com/youtube/js_api_referencemagazine

1 - ajouter &enablejsapi=1 à IFRAME SRC

2-jQuery func:

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

Fonctionne bien

Pour avoir la réponse acceptée par mjhm travaillant 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>

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

Août 2018 je n'ai pas trouvé d'exemple de travail sur l'implémentation iframe. D'autres questions étaient liées à Chrome seulement, qui l'a donné un peu.

Vous devrez couper le son mute=1 afin de lecture automatique sur Chrome. FF et IE semblent fonctionner très bien en utilisant autoplay=1 comme paramètre.

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