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