click a play button on the Youtube iframe

Question

I have a iframe of Youtube, and a div above it, I want when the user clicks on that div He plays 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’d like something from the tupo:

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

Answer 1

You can do it in a very simplified way using the parameter autoplay=1 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 does not support cross-origin): http://jsfiddle.net/ngtdvyaj/

Answer 2

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

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

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

Then, in JS, you can use the API as in documentation:

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

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

Example in Jsfiddle

In this example, the div#meuPlayer server to identify the place where the iframe shall be inserted. The iframe will replace to div. When calling the method YT.Player, a new object referring to the video player will be created and returned, which can be used to control the player’s functions in various ways. Behold at this link the functions available for this object.

Answer 3

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

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

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

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