How to use remote image links to call embedded YouTube videos.

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.

 

I think first, you should use the name of the tag associated with each class id. EXAMPLE:

$('iframe.skrillex').fadeIn(100).

​

Also, removing the autoplay from each youtube URL would me useful. And you seemed to have been using '.' for id's, and there is no class for 'video' in your jQuery.

 

I think first, you should use the name of the tag associated with each class id. EXAMPLE:

$('iframe.skrillex').fadeIn(100).

​

Also, removing the autoplay from each youtube URL would me useful. And you seemed to have been using '.' for id's, and there is no class for 'video' in your jQuery.

 

Hey Maathew,

Thanks for your quick reply. Unfortunately none of your suggestions resolve the problem. Any other thoughts?

M.J.

 

I resolved this issue with Javascript and anchor tag. Here's the code:

<div class="head"><a id="ytplayer" name="ytplayer"></a>
<div id="ytplayer_div" style="background: #000"></div></div><!--End Head-->
<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/0x1vbsSiLKU&amp;autoplay=1&enablejsapi=1&rel=0&fs=1',
'ytplayer_div',
'511',
'294',
'8',
null,
null,
{
allowScriptAccess: 'always',
allowFullScreen: 'true'
},
{
id: 'ytplayer_object'
}
);
</script>
<div id="wdma1">
<script type="text/javascript">
function ytplayer_loadvideo( id ) {
var o = document.getElementById( 'ytplayer_object' );
if( o ) {
o.loadVideoById( id );
}
}
</script>

<div class="left">
<div class="left-sub">
<div class="transbox"><a href="#ytplayer" onclick="ytplayer_loadvideo( 'UXuvPXR8sF4' );"><img alt="" class="video" src="images/avicii.jpg" /></a></div><!--End Left-sub--></div><!--End Transbox-->

HTML:

Thanks to everyone who offered suggestions.

M.J.