title: Play a video with jQuery located inside an iFrame
body: <p>I have an iFrame on a page set to <code>display: none;</code></p>
  
  <pre><code>&lt;div id="the-stage" style="display:none;"&gt;
  &lt;iframe src="index.html" scrolling="no"&gt;
  &lt;/iframe&gt;
  &lt;/div&gt;&lt;!--end the-stage--&gt;
  </code></pre>
  
  <p>Which has a <code>&lt;video&gt;</code> tag within it:</p>
  
  <pre><code>&lt;video id="video1" width="345" height="264" controls poster="poster.jpg"&gt;
  &lt;source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
  &lt;source src="video.webm" type='video/webm; codecs="vp8, vorbis"'&gt;
  &lt;source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>On the page which has the <code>&lt;iframe&gt;</code> tag, I was trying to play the video when the hidden div is revealed:</p>
  
  <pre><code>jQuery("a.launch").click(function(){
  jQuery("#the-stage").fadeIn();
  jQuery("#video1").get(0).play();
  return false;
  });
  </code></pre>
  
  <p>But then I got the following error in the console:</p>
  
  <blockquote>
    <p>// The console output. cannot call method play of undefined</p>
  </blockquote>
  
  <p>Any ideas?
  Thank you in advance.</p>