上的iframe

這裏的單擊事件做的是我的html代碼上的iframe

<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>

它是一種小gallery.What我試圖做到的，是在點擊右邊的任何小的視頻，它必須的在精選視頻框中加載。如何做到這一點??

這裏的jsfiddle鏈接http://jsfiddle.net/4HQc4/9/

來源

2013-06-12 iJade

右側的視頻使用縮略圖圖像，而不是將所有視頻加載到iframe中。 –

確定...逸似乎good.let我嘗試 – iJade

你可以嘗試使用類似這樣http://stackoverflow.com/questions/4532210/jquery-ui-popup-a-youtube-video-modally – Pete

用這個代替：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(); 
     }); 
    }); 
});

HTML變化：

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

這使用視頻預覽圖像，並加載新的視頻在特色的div w他們被點擊。

來源

2013-06-12 10:58:33 Joe

thnks man it works great !! – iJade

回答

相關問題