click on a button play on YouTube iframe

18

I have iframe of Youtube, and a div over it, I want it when the user clicks on that div it plays in the video. My 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>

I would like something from the Tupo:

 $( ".botaoMaior" ).click(function() {
  $( ".botaoTeste" ).click();
});
    
asked by anonymous 02.02.2015 / 11:33

3 answers

14

You can do this in a very simplified way using the autoplay=1 parameter in 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>

Where image_id is the id of your image or clickable button and .frameVideo is the class of <iframe>

Example online (snippets run in SandBox and therefore do not support cross-origin): link

    
02.02.2015 / 11:59
13

Include the youtube API script and replace your iframe with a div with an id to be able to identify it:

<script src="https://www.youtube.com/iframe_api"></script><divclass="editable videoMaior" name="videoMaior">
    <div id="meuPlayer"></div>
</div>

Then in JS you can use the API as documentation :

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

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

JSFiddle Example

In this example, div#meuPlayer server to identify where iframe will be inserted. iframe will replace with div . When calling the YT.Player method, a new object related to the video player will be created and returned, which can be used to control the player functions in a number of ways. See this link for the functions available for this object.

    
06.02.2015 / 16:15
7

You can not manipulate DOM documents from an iframe that points to a different domain from the page that contains it. What you can do in this case to have greater control over the player is to use the Youtube Embbed API.

link

Using the API you could have something like the one below to play the video.

$( ".botaoMaior" ).click(function() {
    player.playVideo();
});
    
06.02.2015 / 15:00