Question

我正在向网页添加视频<iframes>，但我希望它们包含在某些内容中，这样他们就不会显示/加载，直到我想要显示视频（因此加载所有视频内容）。

想象一下页面上的100个视频，我不想提前加载所有内容。但只在需要时。但我确实希望源（即嵌入代码）出现在页面上，以方便管理员

Answer 1

但我希望它们被包含在某些东西中，所以它们不会显示/触发器直到我想要显示视频（因此加载所有视频）视频内容）

在您想播放视频之前，请勿在{{1}}个元素中加入src属性。将<video></video>属性添加到src元素后，您可以在<video>元素上调用.load()，.play()来播放视频。

Answer 2

你的问题并不是很清楚，我想你有问题是否有办法我可以动态加载iframe，这样我的页面加载速度就不会很慢。

答案是肯定的，有很多方法可以做到这一点，我不知道哪种实现最适合你，但这里有一个可能的解决方案。

＆＃13;

body {
  margin: 0;
}
.menu {
  width: 30%;
  float: left;
}
.menu button {
  width: 100%;
  padding: 50px;
}
#iframe_cont {
  width: 70%;
  height: 100%;
  min-height: 500px;
  float: right;
}

＆＃13;

<div class="menu">
  <button onclick="toggleFrame('https://www.google.com/maps/embed','#iframe_cont')">Example 1</button>
  <button onclick="toggleFrame('https://youtube.com/embed/C0DPdy98e4c','#iframe_cont')">Example 2</button>
  <button onclick="toggleFrame('https://youtube.com/embed/-YGDyPAwQz0','#iframe_cont')">Example 3</button>
</div>

<iframe id="iframe_cont" frameborder="0" style="display:none;"></iframe>

＆＃13;

asynchronously

＆＃13;

如何包含iframe视频以使其无法加载

2 个答案: