Question

我被指示在包含iframe默认显示的页面上创建一个或多个div：none。

当div显示时，iframe可以播放YouTube视频关于特定主题。
使iframe div可见的链接是列表中的项目可能的主题。
视频＆＃34;窗口＆＃34;应该打开的位置链接文字是。

我知道我可以通过页面上的一个视频执行此操作，并且对页面加载时间的影响很小。但如果列表中有30个主题呢？我是否需要为每个窗口创建适当位置的窗口？

如果我这样做，那么在页面加载时会加载所有30个视频，即使div和iframe都被隐藏了吗？

我最需要知道的是是否有一个HTML / CSS解决方案，这个页面包含许多不涉及脚本且不会对其造成重大影响的潜在视频页面加载时间。

这听起来是我读过的其他答案，好像是出现/消失视频＆＃34; windows＆＃34;像这样都涉及脚本（Javascript或HTML / CSS之外的其他东西）。

Answer 1

如果您只想使用HTML和CSS，那么您需要在每个人的适当位置创建一个＆＃39;窗口，如您所要求的那样。

是的，这会极大地影响页面的加载时间，因此最好使用Javascript动态加载所有视频内容。

听起来你并不知道任何JS并且甚至不敢学习它，但是执行你想要的脚本会很容易。我说你试一试。此外，JS与HTML和CSS齐头并进。不妨现在就去学习它。

Answer 2

我不认为你在使用没有任何脚本的iframe之后能够获得效果......

另一方面，如果你可以使用html5视频标签而不是iframe，你可以将它拉下来。

li {
  border: 1px solid red;
}
li video {
  height: 0;
  transition: height 0.3s;
}
li:hover video {
  height: 150px;
  transition: height 0.3s;
}

<ul>
  <li>Hover me!
    <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" preload="none" controls>Your browser does not support the <code>video</code> element.</video>
  </li>
  <li>Hover Me!
    <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" preload="none" controls>Your browser does not support the <code>video</code> element.</video>
  </li>
  <li>Hover Me!
    <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" preload="none" controls>Your browser does not support the <code>video</code> element.</video>
  </li>
</ul>

在视频上使用preload="none"可以防止在用户按下播放之前加载视频。明显的缺点是用户可能需要等待几秒钟才能让视频在按下播放后缓冲，但是如果不使用任何脚本，这可能是您最不好的选择。

是否有一个HTML / CSS唯一的解决方案（没有脚本）来创建隐藏的iframe，直到它们变得可见时才加载？

2 个答案: