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

225

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?

472084
fonte
Existe uma maneira de silenciar o som quando o vídeo começa a tocar, por meio de código, eu não quer surpreender meus usuários com som
daniel metlitski

Respostas:

423

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.

mjhm
fonte
2
Dica: em dispositivos móveis, é possível que o parâmetro src e a chamada da API não funcionem devido a restrições: developers.google.com/youtube/…
Linus Caldwell
Acho que no celular (Webview no Android 5.0) a função onYouTubeIframeAPIReady()não é acionada. Alguém tem uma solução?
Alguém em algum lugar
2
Existe uma maneira de silenciar o som quando o vídeo começa a tocar, por meio de código, eu não quer surpreender meus usuários com som
daniel metlitski
6
Você também pode precisar: permitir = "autoplay" para o seu iFrame
Jeffz
40

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>
Waheed ur Rehman
fonte
2
adicionar ?autoplay=1ao src
Squirrl
1
sim, na verdade, reprodução automática = 1 tempo? indica que src pode ter parâmetros como cor, controles e cada um separado pelo sinal &. descrição detalhada pode ser vista aqui developers.google.com/youtube/player_parameters#Parameters
Waheed ur Rehman
35

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>
MatayoshiMariano
fonte
14

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>
Tim Vermaelen
fonte
12

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

Exemplo abaixo:.

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

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
});
bdanin
fonte
1
Utilizando esta resposta e envolvendo o seletor jQuery em um setTimeoutfuncionou para mim.
precisa saber é o seguinte
1
O mesmo aqui, basta acionar o evento várias vezes a cada segundo e ele funcionará.
Matthias Kleine
6

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

Salman A
fonte
6

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

Hastig Zusammenstellen
fonte
1
A razão pela qual o seu não funcionou é porque você já tinha ?rel=0lá. Se você removesse isso, teria funcionado. Leia mais sobre a sintaxe da string de consulta aqui, se desejar. ?rel=0?autoplay=1deve ser ?autoplay=1ou?rel=0&autoplay=1
jaggedsoft 2/16
@NextLocal Obrigado, vou voltar a isso e editar / excluir minha resposta na próxima vez que estiver trabalhando em algo que iframes vídeos do youtube.
Hastig Zusammenstellen 03/10
o exemplo que você está fornecendo http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1definitivamente não irá funcionar, mas https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1deve
jaggedsoft
@NextLocal Ha, eu entendi agora. Não tenho certeza de como eu não percebi isso: D Obrigado novamente.
Hastig Zusammenstellen 04/10
Existe uma maneira de silenciar o som quando o vídeo começa a tocar, por meio de código, eu não quer surpreender meus usuários com som
daniel metlitski
3

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>
MattAllegro
fonte
2

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>
Jonas WebDev
fonte
funciona um truque! Eu não conseguia descobrir por que o carregamento da página estava mostrando o vídeo apenas algumas vezes e não outras!
shaneonabike 29/01
1

1 - adicionar &enablejsapi=1aIFRAME SRC

2 - Função jQuery:

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

Funciona bem

Gabriel Morais
fonte
No meu caso, ele funciona no console ou quando eu já interagi com o vídeo manualmente. Não funciona com carga, mesmo com tempo limite
mate.gwozdz
0

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

Desenvolvedor HTML5
fonte
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
fonte
0

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

}
Davide Carpini
fonte