Play a video with jQuery located inside an iFrame

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 <video> tag within it:

<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 which has the <iframe> tag, I was trying to play the video when the hidden div is revealed:

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:

// The console output. cannot call method play of undefined

Any ideas? Thank you in advance.

You need to use contents() to get the iframe content and then find the video element. Also you should make sure to do this after the div is visible i.e when fading is complete. The reason is when the div which contains iframe is hidden the video will not play.

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

You need to access the document of the iframe with contents().

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