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

225

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?

472084
la source
Existe-t-il un moyen de couper le son lorsque la vidéo commence à jouer, grâce au code, je ne veux pas surprendre mes utilisateurs avec le son
Daniel Metlitski

Réponses:

423

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.

mjhm
la source
2
Astuce: sur les appareils mobiles, il est possible que le paramètre src et l'appel api ne fonctionnent pas en raison de restrictions: developers.google.com/youtube/…
Linus Caldwell
Je trouve que sur mobile (Webview sur Android 5.0) la fonction onYouTubeIframeAPIReady()n'est pas déclenchée. Quelqu'un a une solution?
Someone Somewhere
2
Existe-t-il un moyen de couper le son lorsque la vidéo commence à jouer, grâce au code, je ne veux pas surprendre mes utilisateurs avec le son
Daniel Metlitski
6
Vous pouvez également avoir besoin: allow = "autoplay" pour votre iFrame
Jeffz
40

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>
Waheed ur Rehman
la source
2
ajouter ?autoplay=1au src
Squirrl
1
oui lecture automatique = 1 pendant? indique que src peut avoir des paramètres comme la couleur, les contrôles et chacun séparé par un signe &. une description détaillée peut être consultée ici developers.google.com/youtube/player_parameters#Parameters
Waheed ur Rehman
35

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>
MatayoshiMariano
la source
14

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>
Tim Vermaelen
la source
12

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&amp;autoplay 

Exemple ci-dessous:.

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

à 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
});
bdanin
la source
1
Utiliser cette réponse et encapsuler le sélecteur jQuery dans un setTimeouttravail pour moi.
tyler.frankenstein
1
Même chose ici, déclenchez l'événement plusieurs fois par seconde et cela fonctionnera.
Matthias Kleine
6

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

Salman A
la source
6

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

Hastig Zusammenstellen
la source
1
La raison pour laquelle la vôtre n'a pas fonctionné est que vous en aviez déjà une ?rel=0. Si vous l'aviez supprimé, cela aurait fonctionné. En savoir plus sur la syntaxe des chaînes de requête ici si vous le souhaitez. ?rel=0?autoplay=1devrait être soit ?autoplay=1ou?rel=0&autoplay=1
jaggedsoft
@NextLocal Merci, je vais y revenir et éditer / supprimer ma réponse la prochaine fois que je travaille sur quelque chose qui iframes les vidéos YouTube.
Hastig Zusammenstellen
l'exemple que vous fournissez http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1ne fonctionnera certainement pas, mais https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1devrait
jaggedsoft
@NextLocal Ha, je l'ai maintenant. Je ne sais pas comment je ne l'ai pas réalisé: D Merci encore.
Hastig Zusammenstellen
Existe-t-il un moyen de couper le son lorsque la vidéo commence à jouer, grâce au code, je ne veux pas surprendre mes utilisateurs avec le son
Daniel Metlitski
3

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>
MattAllegro
la source
2

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>
Jonas WebDev
la source
fonctionne un tour! Je ne pouvais pas comprendre pourquoi les chargements de page ne montraient la vidéo que parfois et pas d'autres fois!
shaneonabike
1

1 - ajouter &enablejsapi=1àIFRAME SRC

2 - Fonction jQuery:

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

Fonctionne bien

Gabriel Morais
la source
Dans mon cas, cela fonctionne à partir de la console ou lorsque j'ai déjà interagi avec la vidéo manuellement. Ne fonctionne pas en charge, même expiré
mate.gwozdz
0

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

Développeur HTML5
la source
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
la source
0

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

}
Davide Carpini
la source