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