title: Mobile Safari and iframe show/hide with youtube source
body: <p>I am coding a web app in mobile Safari and I seem to be hung up on something that I think should be simple enough, though it is eluding me right now.</p>
  
  <p>Essentially, I have an <code>iframe</code> with a <code>src</code> of a youtube video.  When someone taps on a point of interest it shows that video in a little modal.  It has a close button for closing as well.</p>
  
  <p>This uses nothing more than jQuery's <code>show</code> and <code>hide</code> methods.  Literally:</p>
  
  <pre><code>$(".selector").on("click", function() {
  
      $(this).show();
  
  });
  </code></pre>
  
  <p>and </p>
  
  <pre><code>$(".selector").on("click", function() {
  
      $(this).hide();
  
  });
  </code></pre>
  
  <p>When the modal comes up, the user has to tap on the youtube video to play it.  All is well with that part.</p>
  
  <p>The strange part comes into play when you close it and try to open it again.  The modal pops up, but the video is blank.  There is just a black screen but the video can be heard still playing.</p>
  
  <p>I am guessing this has something to do with the additional <code>window</code> context that the <code>iframe</code> creates.  Maybe this is hiding something additional down in that particular tree?</p>
  
  <p>When I test my mobile code on a desktop, it works fine and I have no issues.  Testing on the iPhone does not.</p>
  
  <p>Any thoughts on this one??</p>