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

Question

当用户单击某个链接时，我试图在同一个div中显示不同的视频。

我已经在JSFiddle中实现了它，但当我将它上传到我的网站时，它不会像在fiddle上那样在点击时更改视频。此外，我用来存放视频的容器在点击链接之前不会显示。我需要容器经常出现在页面上。

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

你可以在我的页面上看到功能的网站是http://www.besafer.org，位于videos部分下。

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%;
}

<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>

Answer 1

您有多个重复的#id，这将始终强制在DOM中进行"懒惰"查找。具有id='education'和id='computer'的多个元素是无效的，并且对基本行为和性能有害。一旦找到#id，浏览器就不再寻找其他任何东西，因为浏览器总是认为#id是唯一的——因此，继续尝试寻找具有相同#id的另一个元素是不合逻辑的

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

1. 嵌入YT视频的一个iframe。设置name

   • 示例。<iframe名称='yt'...

2. 为每个视频分配一个<a>。将每个视频的URL设置为href

   • 示例。<ahref='https://www.youtube.com/embed/YXMkXsy-dx4?rel=0&showinfo=0’>Grilling</a>

3. 接下来，将每个<a>target属性设置为iframe 的name属性

   • 示例。<a href='https://www.youtube.com/embed/YXMkXsy-dx4?rel=0&amp;showinfo=0'目标='yt'>Grilling</a>

演示

body {
position: relative;
}

<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>

Answer 2

我不明白你在这里尝试使用了什么逻辑方法，有很多重复元素。但是重构您的原始代码，您可以通过使用一个始终可见的带有iframe的div和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>

add onclick=为列表中的每个链接播放视频(视频链接)

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

并从css 中删除此行

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

这是一个JSFiddle