我如何才能包含一个iframe视频，这样它就不会't负载

How can I contain an iframe video so that it doesn't load

本文关键字：负载 包含一 视频 iframe      更新时间：2023-09-26

我正在将视频<iframes>添加到页面中，但我希望它们包含在某个内容中，这样它们在我想要显示视频之前不会显示/加载（因此加载所有视频内容）。

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

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

在播放视频之前，不要在<video></video>元素中包含src属性。将src属性添加到<video>元素时，可以调用video元素上的.load()、.play()来播放视频。

你的问题不是非常清楚，我想你是在问，有没有一种方法可以动态加载iframe，这样我的页面加载就不会太慢。

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

showFrame = function(url, id) {
  var iframe = document.querySelector(id);
  iframe.style.display = "block";
  iframe.src = url;
};
hideFrame = function(id) {
  var iframe = document.querySelector(id);
  iframe.style.display = "none";
  iframe.src = "";
};
toggleFrame = function(url, id) {
  var iframe = document.querySelector(id);
  if (iframe.style.display == 'none') {
    showFrame(url, id);
  } else if (iframe.src == url) {
    hideFrame(id);
  } else {
    showFrame(url, id);
  }
};
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;
}
<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>

相关文章：