web-dev-qa-db-fra.com

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

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

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

javascripthtmliframeyoutubeyoutube-api
204
472084

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

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

Le API JavaScript pour iframe incorpore existe, mais est toujours publié en tant que fonctionnalité expérimentale.

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

411
mjhm

Le code incorporé 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>
40
Waheed ur Rehman

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

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

2014 iframe intégrer 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>
10
Ralph

à la fin de l'iframe src, ajoutez &enablejsapi=1 pour autoriser l'utilisation de l'API js 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 document.ready

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

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

Edit: je ne suis pas sûr à 100% de document.ready, l'iframe sera prêt, car YouTube pourrait toujours charger la vidéo. J'utilise 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
});
7
bdanin

Plusieurs astuces pourboires pour ceux qui ne connaissent pas (passé moi et futur moi)

Si vous faites une seule requête avec l'URL, seul ?autoplay=1 fonctionne comme le montre 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 les autres commencent par un &

Disons que vous souhaitez 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 ça ne marchera 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'infos

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

6
Hastig Zusammenstellen

Les indicateurs ou les 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 autoplay est pris en charge par tous les lecteurs (AS3, AS2 et HTML5).

6
Salman A

Août 2018 Je n'ai pas trouvé d'exemple de travail sur la mise en œuvre d'iframe. D'autres questions portaient sur Chrome uniquement, ce qui en donnait un peu.

Vous devrez couper le son mute=1 pour pouvoir lire automatiquement sur Chrome. FF et IE semblent fonctionner correctement 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>
5
Tim Vermaelen

Pour que la réponse acceptée de mjhm fonctionne 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>
2
MattAllegro

1 - ajoutez &enablejsapi=1 à IFRAME SRC

2 - jQuery func:

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

Fonctionne bien

1
Gabriel Morais

Décembre 2018,

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

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

}
0
Davide Carpini

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 jouer sur youtube avec l'identifiant:

swfobject.embedSWF

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

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