Faire un sur événement click sur iframe

Question

Voici mon code html

<table width="100%"> 
     <tr> 
      <td colspan="4" align="right"> 
      </td> 
     </tr> 
     <tr> 
      <td align="left" colspan="3"> 
       <h1> 
        Featured</h1> 
      </td> 
      <td align="right"> 
       <table> 
        <tr> 
         <td> 
          <h1> 
           Popular</h1> 
         </td> 
         <td> 
          <h1> 
           | 
          </h1> 
         </td> 
         <td> 
          <h1> 
           Recent</h1> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td rowspan="2"> 
       <iframe width="300" height="400" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0" 
        onload="Show();" allowfullscreen></iframe> 
      </td> 
      <td style="padding-top: 0px;"> 
       <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0" 
        allowfullscreen></iframe> 
      </td> 
      <td style="padding-top: 0px;"> 
       <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0" 
        allowfullscreen></iframe> 
      </td> 
      <td style="padding-top: 0px;"> 
       <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0" 
        allowfullscreen></iframe> 
      </td> 
     </tr> 
     <tr> 
      <td style="padding-bottom: 0px;"> 
       <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0" 
        allowfullscreen></iframe> 
      </td> 
      <td style="padding-top: 0px;"> 
       <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0" 
        allowfullscreen></iframe> 
      </td> 
      <td style="padding-top: 0px;"> 
       <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0" 
        allowfullscreen></iframe> 
      </td> 
     </tr> 
    </table> 

Son une sorte d'un petit gallery.What je suis en train de réaliser est en cliquant sur l'une des petites vidéos sur le côté droit, il doit charger dans la boîte vidéo en vedette. Comment y parvenir ??

Voici le lien jsFiddle http://jsfiddle.net/4HQc4/9/

Answer 1

Utilisez ceci: http://jsfiddle.net/4HQc4/10/

JS:

$(document).on('click', 'td img', function() { 
    var videoID = $(this).data('video'); 
    $('.featured-box iframe').fadeOut(function() { 
     $(this).attr('src', 'http://www.youtube.com/embed/' + videoID).load(function() { 
      $(this).fadeIn(); 
     }); 
    }); 
}); 

changement HTML:

<td style="padding-top: 0px;"> 
    <img src="http://img.youtube.com/vi/oNgMIrNs1-o/mqdefault.jpg" data-video="oNgMIrNs1-o" /> 
</td> 

Il utilise les images de prévisualisation vidéo et charge le nouvelle vidéo dans le div w quand ils sont cliqués.