Play video using jQuery located inside iFrame

Question

I have an iFrame on a page set to display: none;

<div id="the-stage" style="display:none;">
<iframe src="index.html" scrolling="no">
</iframe>
</div><!--end the-stage-->

Which has a tag <video>:

<video id="video1" width="345" height="264" controls poster="poster.jpg">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

On the page with the tag, <iframe>I tried to play the video when a hidden div was detected:

jQuery("a.launch").click(function(){
jQuery("#the-stage").fadeIn();
jQuery("#video1").get(0).play();
return false;
});

But then I got the following error in the console:

// Output to the console. cannot call the indefinite playback method

Any ideas? Thanks in advance.

Answer 1

contents() iframe, video. div i.e . , div, iframe, , video .

jQuery("a.launch").click(function(){
   jQuery("#the-stage").fadeIn(function(){
       jQuery("#the-stage").find("iframe").contents().find("#video1").get(0).play();
   });
   return false;
});

Answer 2

document iframe contents().

jQuery('#the-stage').contents().find('#video1').get(0).play();