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; 
})