CODEWITHSUNDEEP
jqueryiframehtml5-video
Yahreen
Yahreen

Reputation: 1669

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.

Upvotes: 5

Views: 10391

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69905

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

Upvotes: 5

alex
alex

Reputation: 490123

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

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

Upvotes: 2

Related Questions