Question

我想在用户点击某个链接时在同一个Div中显示不同的视频。

我已经在JSFiddle中使用了它，但是当我将它上传到我的网站时，它不会像点击小提琴一样改变视频。此外，我用来保存视频的容器在点击链接之前不会显示。我需要容器不断出现在页面上。

这是小提琴： http://jsfiddle.net/BeSafer/nhx8frku/3/

您可以在videos部分下面http://www.besafer.org查看我页面上的功能的网站。

＆＃13;

table~div[id] {
  display: none;
}

div[id]:target {
  display: block;
}

#education {
  box-sizing: border-box;
  background: url(http://www.howlinwolfmedia.com/galleryphotography /Computer1.png) center center no-repeat;
  background-size: contain;
  padding: 3% 13.7% 17.2% 16.9%;
  position: absolute !important;
  top: 0px;
  left: 0px;
  width: 80%;
  height: 100%;
}

＆＃13;

<div id="fireplace">
  <div id="computer" style='position: relative; width: 100%; height: 0px; padding-bottom: 60%;'>
    <iframe id="education" style='position: absolute; left: 0px; top: 0px; width: 100%; height: 100%' src="https://www.youtube.com/embed/YXMkXsy-dx4?rel=0&amp;showinfo=0" frameborder="0"></iframe>
  </div>
</div>
<div id="candle">
  <div id="computer" style='position: relative; width: 100%; height: 0px; padding-bottom: 60%;'>
    <iframe id="education" style='position: absolute; left: 0px; top: 0px; width: 100%; height: 100%' src="https://www.youtube.com/embed/IfuSO6cMPYM?rel=0&amp;showinfo=0" frameborder="0"></iframe>
  </div>
</div>

＆＃13;

Answer 1

你有多个重复的#id，总是会强迫一个＆＃34; lazy＆＃34;在DOM中查找。拥有多个id='education'和id='computer'的元素无效且对基本行为和性能有害。找到#id后，浏览器不再查找其他内容，因为浏览器 将始终认为#id是唯一的 - 因此继续尝试查找其他元素是不合逻辑的相同的#id。

您甚至不需要JavaScript，您可以使用<a>的一个非常古老的功能。

嵌入了YT视频的一个iframe。设置name
- 实施例。 <iframe name =＆＃39; yt＆＃39; ...
为每个视频分配<a>。将每个视频的网址设置为href
- 实施例。 <a href =＆＃39; https://www.youtube.com/embed/YXMkXsy-dx4?rel=0&showinfo=0＆＃39; >Grilling</a>
接下来将每个<a> target属性设置为iframe的name属性
- 实施例。 <a href='https://www.youtube.com/embed/YXMkXsy-dx4?rel=0&showinfo=0' 目标=＆＃39; yt＆＃39; >Grilling</a>

演示

＆＃13;

body {
  position: relative;
}

＆＃13;

<nav>
  <a href='https://www.youtube.com/embed/YXMkXsy-dx4?rel=0&amp;showinfo=0' target='yt'>Fireplace</a>

  <a href='https://www.youtube.com/embed/tbPKVMpEA6M?rel=0&amp;showinfo=0' target='yt'>Electrical</a>

  <a href='https://www.youtube.com/embed/JKxEGq_u6cM?rel=0&amp;showinfo=0' target='yt'>Smoking</a>
</nav>

<iframe name='yt' style="position: absolute; left: 0px; top: 30px; width: 50%; min-height: 50%" src="https://www.youtube.com/embed/C9KSFRq4rXA?rel=0&amp;showinfo=0" frameborder="0"></iframe>

＆＃13;

Answer 2

我不明白你试图在这里使用什么逻辑方法，有很多重复元素。但是重构原始代码，你可以通过使用一个始终可见的iframe和javascript来改变其src属性（因此改变里面的视频）来实现你想要的效果。

脚本

function playVideo(id)
{
    document.getElementById('education').src = id;
}

html（只保留其中一个div）

<div id="computer" style='position: relative; width: 100%; height: 0px; padding-bottom: 60%;'>
    <iframe id="education" style='position: absolute; left: 0px; top: 0px; width: 100%; height: 100%' src="" frameborder="0"></iframe>
  </div>

为列表中的每个链接添加onclick = playvideo（视频链接）

<a href="#" onclick='playVideo("https://www.youtube.com/embed/tbPKVMpEA6M?rel=0&amp;showinfo=0")'>
                electrical
              </a>

并从css中删除此行

table ~div[id] {
  display: none;
}

这是JSFiddle

使用相同的div在点击时显示不同的视频

2 个答案:

演示