Pause/Stop embedded YouTube video from remote image link.

I am developing a site with multiple embedded videos in the header. All are contained within separate iframes. The first video is set to autoplay=1 and begins playing upon page load. The remaining videos are set to display:none.

When a visitor clicks on an image associated with a video, the current video fades out and the new video fades in via a jQuery script.

This works perfectly in Firefox, but fails in other browsers and I do not know why. Firefox correctly stops the current video and loads the selected video without a problem. Every other browser I've tested continues playing the current video even after its containing <iframe> fades and loads the selected video as well.

Why is this?

Here is a sample of code:

<div class="head" id="video">
<iframe id="splash" width="511" height="294" src="http://www.youtube.com/embed/0x1vbsSiLKU?&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>
<iframe class="avicii" src="http://www.youtube.com/embed/UXuvPXR8sF4?modestbranding=1&amp;rel=0&amp;autoplay=1" width="511" height="294" frameborder="0" allowfullscreen=""></iframe>
<iframe class="afrojack" width="511" height="294" src="http://www.youtube.com/embed/GTakwyhl1FE?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>
<iframe class="skrillex" src="http://www.youtube.com/embed/v8XnWUmxczs?modestbranding=1&amp;rel=0&amp;autoplay=1" width="511" height="294" frameborder="0" allowfullscreen=""></iframe>
<iframe class="shm" width="511" height="294" src="http://www.youtube.com/embed/t6aZDhRnd0U?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>
</div><!--End Head-->

<div class="left">
  <div class="left-sub">
    <div class="transbox"><img alt="" class="video" id="avicii" src="images/avicii.jpg" />
  </div><!--End Left-sub-->
    </div><!--End Transbox-->

  <div class="left-sub">
    <div class="transbox"><img alt="" class="video" id="skrillex" src="images/skrillex.png" />
  </div><!--End Left-sub-->
    </div><!--End Transbox-->
</div><!--End Left-->


<div class="right">
  <div class="right-sub">
    <div class="transbox"><img alt="" class="video" id="shm" src="images/swedish-house-mafia.jpg" />
  </div><!--End Right-sub-->
    </div><!--End Transbox-->


  <div class="right-sub">
    <div class="transbox"><img alt="" class="video" id="afrojack" src="images/afrojack.jpg" />
  </div><!--End Right-sub-->
    </div><!--End Transbox-->
</div><!--End Right-->

HTML:

and associated jQuery:

$(document).ready(function() {
$("#avicii").click(function() {
$("#splash").fadeOut(100);
$(".afrojack").fadeOut(100);
$(".guetta").fadeOut(100);
$(".shm").fadeOut(100);
$(".skrillex").fadeOut(100);
$(".avicii").fadeIn(100);
});


$("#afrojack").click(function() {
$("#splash").fadeOut(100);
$(".avicii").fadeOut(100);
$(".guetta").fadeOut(100);
$(".shm").fadeOut(100);
$(".skrillex").fadeOut(100);
$(".afrojack").fadeIn(100);
});


$("#guetta").click(function() {
$("#splash").fadeOut(100);
$(".avicii").fadeOut(100);
$(".afrojack").fadeOut(100);
$(".shm").fadeOut(100);
$(".skrillex").fadeOut(100);
$(".guetta").fadeIn(100);
});


$("#shm").click(function() {
$("#splash").fadeOut(100);
$(".avicii").fadeOut(100);
$(".afrojack").fadeOut(100);
$(".guetta").fadeOut(100);
$(".skrillex").fadeOut(100);
$(".shm").fadeIn(100);
});


$("#skrillex").click(function() {
$("#splash").fadeOut(100);
$(".avicii").fadeOut(100);
$(".afrojack").fadeOut(100);
$(".guetta").fadeOut(100);
$(".shm").fadeOut(100);
$(".skrillex").fadeIn(100);
});
});

Code (markup):

You can view the page at:

http://5150design.net/templates/WDMA

I recommend viewing it in Firefox and then Webkit (Chome and/or Safari). Have yet to test in I.E.

Any help would be greatly appreciated.

Thanks,
M.J.