Play a video with jQuery located inside an 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 <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.

Answer 1

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;
});