19

Tenho um iframe do Youtube, e uma div por cima dela, quero que quando o usuário clique em cima dessa div ele dê o play no vídeo. Meu HTML:

<div class="p-relative">
    <div class="botaoMaior">
        <div class="btplay"></div>
    </div>
    <div class="editable videoMaior" name="videoMaior">
    <iframe width="960" height="780" src="//www.youtube.com/embed/eX0IjD5DPQI" frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>

Eu gostaria de algo do tupo:

 $( ".botaoMaior" ).click(function() {
  $( ".botaoTeste" ).click();
});
2

3 Respostas 3

17
+100

Você pode fazer de uma maneira bem simplificada usando o parâmetro autoplay=1 na querystring:

$('#image_id').click(function() {
    $(".frameVideo").attr('src', $(".frameVideo").attr('src') + '?autoplay=1'); 
});

<button id="image_id">Play</button>
<iframe class="frameVideo" src="//www.youtube.com/embed/eX0IjD5DPQI" frameborder="0" allowfullscreen=""></iframe>

Aonde image_id é o id de sua imagem ou botão clicável e .frameVideo é a classe do <iframe>

Exemplo online (os snippets rodam em SandBox e por isto não suporta o cross-origin): http://jsfiddle.net/ngtdvyaj/

9
  • tentei da seguinte forma e não deu certo jsfiddle.net/felipestoker/cp6xa0rk Commented 2/02/2015 às 13:04
  • atualizei a parte do frame da uma olhada
    – Otto
    Commented 2/02/2015 às 13:17
  • 1
    youtube bloqueado no trabalho .... rsrsrs so a noite
    – Otto
    Commented 2/02/2015 às 13:29
  • 2
    @FelipeStoker seu exemplo não funcionou (jsfiddle.net/felipestoker/cp6xa0rk) por que você não adicionou o jquery aos resources :( e você usou o seletor .frameVideo iframe, mas o Otto forneceu o exemplo assim: .videoMaior iframe (que é o correto), a classe frameVideo já pertence ao <iframe>. Note que o , parent) não existe também. Código corrigido: jsfiddle.net/cp6xa0rk/1
    – Syzoth
    Commented 5/02/2015 às 17:14
  • 1
    opa tuda a ajuda é bem vinda
    – Otto
    Commented 5/02/2015 às 18:36
14

Inclua o script da API do youtube e substitua seu iframe por uma div com um id para poder identificá-la:

<script src="https://www.youtube.com/iframe_api"></script>

<div class="editable videoMaior" name="videoMaior">
    <div id="meuPlayer"></div>
</div>

Depois, no JS, você pode utilizar a API como na documentação:

var player = new YT.Player('meuPlayer', {
    width: 540,
    height: 320,
    videoId: 'eX0IjD5DPQI'
});

$(".botaoMaior").on("click", function() {
    player.playVideo();
});

Exemplo no JSFiddle

Neste exemplo, a div#meuPlayer server para identificar o lugar onde o iframe será inserido. O iframe irá substituir a div. Ao chamar o método YT.Player, um novo objeto referente ao player do vídeo será criado e retornado, o qual pode ser utilizado para controlar as funções do player de diversas formas. Veja neste link as funções disponíveis para este objeto.

3
  • o Iframe vai dentro da div meuPlayer? Commented 15/02/2015 às 1:36
  • Não, a api vai sobrescrever a div pelo iframe.
    – Oeslei
    Commented 15/02/2015 às 2:48
  • como eu eu eu farei pra deixar o videoId gerenciável? Commented 21/02/2015 às 18:16
7
+25

Você não pode manipular os documento DOM de um iframe que aponta para um domínio diferente da pagina que o contem. O que você pode fazer neste caso para ter um controle maior sobre o player é utlizar a API do Youtube Embbed.

https://developers.google.com/youtube/iframe_api_reference?hl=pt-br

Utilizando a API você poderia ter algo como o trecho abaixo para reproduzir o video.

$( ".botaoMaior" ).click(function() {
    player.playVideo();
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .