Como incorporar um vídeo do YouTube com reprodução automática em um iframe?

Estou tentando incorporar a nova versão iframe de um vídeo do YouTube e fazer com que ela seja reproduzida automaticamente.

Tanto quanto posso dizer, não há como fazer isso alterando sinalizadores para o URL. Existe uma maneira de fazer isso usando JavaScript e a API?

Isso funciona no Chrome, mas não no Firefox 3.6 (aviso: vídeo RickRoll):

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

A API JavaScript para incorporações de iframe existe, mas ainda é postada como um recurso experimental.

ATUALIZAÇÃO: a API iframe agora é totalmente suportada e "Criando objetos YT.Player - Exemplo 2" mostra como definir "reprodução automática" em JavaScript.

O código incorporado do youtube é reproduzido automaticamente por padrão. Basta adicionar autoplay=1no final do atributo "src". Por exemplo:

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

Desde abril de 2018, o Google fez algumas alterações na Política de reprodução automática . Então você terá que fazer algo assim:

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

Agosto de 2018, não encontrei um exemplo de trabalho na implementação de iframe. Outras perguntas estavam relacionadas apenas ao Chrome, o que o denunciou um pouco.

Você precisará silenciar o som mute=1para reproduzir automaticamente no Chrome. FF e IE parecem estar funcionando muito bem usando autoplay=1como parâmetro.

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

2014 iframe incorporar como incorporar um vídeo do youtube com reprodução automática e nenhum vídeo sugerido no final do clipe

rel=0&autoplay 

Exemplo abaixo:.

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

no final do iframe src, adicione &enablejsapi=1para permitir que a API js seja usada no vídeo

e depois com jquery:

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

isso deve reproduzir o vídeo automaticamente em document.ready

Observe que você também pode usar isso em uma função de clique para clicar em outro elemento para iniciar o vídeo

Mais importante, você não pode iniciar automaticamente os vídeos em um dispositivo móvel, para que os usuários sempre tenham que clicar no próprio player de vídeo para iniciar o vídeo.

Editar: na verdade, não tenho 100% de certeza no documento. O iframe já estará pronto, porque o YouTube ainda pode estar carregando o vídeo. Na verdade, estou usando essa função dentro de uma função de clique:

$('.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
});

Os sinalizadores ou parâmetros que você pode usar com incorporações IFRAME e OBJECT estão documentados aqui; os detalhes sobre qual parâmetro funciona com qual jogador também são mencionados claramente:

Players incorporados no YouTube e parâmetros de player

Você notará que autoplayé suportado por todos os players (AS3, AS2 e HTML5).

Dica de várias consultas para quem não sabe (além de mim e futuro)

Se você estiver fazendo uma única consulta com o URL, ?autoplay=1funciona como mostra a resposta de mjhm

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

Se você estiver fazendo várias consultas, lembre-se de que a primeira começa um ?pouco e o restante começa com um&

Digamos que você queira desativar os vídeos relacionados, mas ativar a reprodução automática ...

Isso funciona

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

e isso funciona

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

Mas isso não vai funcionar ..

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

comparações de exemplo

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

mais informações

Leia a resposta do NextLocal abaixo para obter mais informações sobre o uso de várias cadeias de consulta

Para ter a resposta aceita por mjhm trabalhando no Chrome 66 em maio de 2018, adicionei allow=autoplayao iframe e enable_js=1à string de consulta:

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

Atualmente, incluo um novo atributo "allow" na tag iframe, por exemplo:

allow = "acelerômetro; reprodução automática; mídia criptografada; giroscópio; imagem na imagem"

O código final é:

<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 - adicionar &enablejsapi=1aIFRAME SRC

2 - Função jQuery:

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

Funciona bem

Para usar a 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>

Para reproduzir o youtube com o ID:

swfobject.embedSWF

referência: 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>

Dezembro de 2018,

À procura de um vídeo do youtube AUTOPLAY, LOOP, MUTE para reagir.

Outras respostas não funcionaram.

Encontrei uma solução com uma biblioteca: 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}
            />
        )
    }

}