Question

我有一个带有缩略图网格的页面。有些拇指打开图像，有些打开嵌入的视频，全部打开到Bootstrap3模式。尝试“杀死”一个模式被解除/隐藏后仍在播放的视频我一直在尝试一些jquery函数（空，删除），它们工作得很好，直到我必须重新打开或打开另一个模态，所以现在我正在做一些与使用replaceWith交换div的东西，这也与照片和youtube嵌入完全一样，但不适用于Instagram视频嵌入。我每页刷新只能获得1个成功的IG视频加载。随后对IG嵌入的任何调用似乎都与IG无关。以下是我目前所处位置的示例：

<a id="myButton" role="button" onclick="showEmbed(0);">CLICK ME (0)</a>
<a id="myButton" role="button" onclick="showEmbed(1);">CLICK ME (1)</a>


<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <div id="inner"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>

<script>
    var showEmbed = function(id) {

      var embed = instagram[id]['embed'];  // grab the IG embed from array
      var newDiv = $(document.createElement('div'));  // create newDiv
      newDiv.attr('id', `newDiv${ id }`);  // add distinct ID to newDiv
      newDiv.append(embed);  // add the embed to the newDiv
      $('#inner').replaceWith(newDiv); // replace placeholder div with newDiv
      $('#myModal').modal('show');  // show the modal


      $('#myModal').on('hidden.bs.modal', function() {
        var inner = $(document.createElement('div'));  // on modal dismiss, remake placeholder div
        inner.attr('id', "inner"); 
        newDiv.replaceWith(inner); // replace the above created newDiv with the recreated placeholder div
      });

    }
  </script>

在这里它看起来像是发生的事情：

1）在激活任何模态之前，您可以看到空div #inner：

2）#inner被＃newDiv0取代，现在里面有嵌入代码（这显示正常）：

3）一旦模态被解除，重新创建#inner并替换＃newDiv0，因为隐藏了模态：

4）就像在第2步中一样，#inner再次被替换，但现在使用#newDiv1（也是IG视频嵌入），但是这次iframe丢失了，网络选项卡显示没有连接到Instagram：

任何人都可以解释为什么这不起作用并且可能会建议一个解决方法吗？感谢您的阅读，我知道这是一篇冗长的帖子。

Answer 1

我能够让plnkr工作。一些事情。

仅在正文中包含一次嵌入脚本。

＆LT; script src =“https://platform.instagram.com/en_US/embeds.js”＆gt;

将下面的window.instgrm调用添加为切换函数的最后一行。

 $('#myModal').modal('show');  // show the modal
 window.instgrm.Embeds.process();

从所有嵌入项中删除embed.js脚本。
可选择将OMITSCRIPT=true添加到您的嵌入链接中（因此不会为每个项目加载embed.js）。

jQuery：交换包含嵌入视频的div

1 个答案: