jQuery - 點擊時用新內容替換iFrame內容

Question

試圖找出最好的方法來做到這一點。我有一個主要的視頻播放器從Vimeo中提取視頻。這個主要玩家的下方是其他視頻的縮略圖。當用戶點擊一個縮略圖時，我希望它使縮略圖視頻代替主視頻。

Vimeo嵌入式都是基於iFrame的。我不確定是否應該替換整個iFrame，或只是URL等。還有主開啓和縮略圖之間的大小差異;不知道是否會自動傳遞，或Vimeo代碼將足夠聰明來調整大小。 Jquery點擊是否可以覆蓋縮略圖通常期望播放小視頻的點擊？

HTML

<div class="blogPlayer"> 
    <iframe src="#" width="528" height="297" frameborder="0"></iframe> 
</div> 

<ul class="blogThumbnails> 
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li> 
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li> 
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li> 
</ul> 

這jQuery是沒有經過充分測試，並當場做了，但想沿着線的東西...

$('.blogThumbnails li').click(function(){ 
    var video = $(this).html(); 
    $('.blogPlayer').replaceWith('video'); 
}) 

Answer 1

你應該只需更換SRC文件，而不是替換整個iframe。如果你要替換整個iframe，那麼你需要調整點擊列表的屬性。

這是我的想法：

<div> 
     <iframe src="#" id="blogPlayer" width="528" height="297" frameborder="0"></iframe> 
</div> 

$('.blogThumbnails li').click(function(){ 
    var url = $(this).attr('src'); 
    $('#blogPlayer).attr('src', url); 
    return false; 
}) 

如果用其他途徑去你需要調整寬度和高度：

$('.blogThumbnails li').click(function(){ 
    var video = $(this).html(); 
    $('.blogPlayer') 
      .replaceWith(video) 
      .attr({ 
        width: '528', 
        height: '297' 
      }); 
    return false; 
})