交换iframe-src以更改其中的视频

Question

我正在尝试制作一个视频菜单，菜单右侧有一个iframe和视频列表，这些视频列表是一个标签，可以在单击时更改iframe的内容。我的解决方案适用于铬，但在mozila和IE上失败。

使用jquery我应该做些什么吗？

• 为什么加入我们？
  加入这个项目只是有点沮丧
• 欢迎来到H&H中心？
  我们欢迎您来到快乐健康中心
• 我们的讲师
  我们的导师会告诉你这个项目对你有多有益
• 宣传
  

我试着将"主视频"的ID作为目标，但它在谷歌chrome 之外的其他浏览器上不起作用

非常感谢

Answer 1

这是一个快速的例子，这里有一个FIDDLE在最新的Chrome、Firefox和amp；即

<ul>
  <li data-href="http://youtube.com/embed/XzbdY_rPtjw">Video 1</li>
  <li data-href="http://youtube.com/embed/qr3dWscslo8">Video 2</li>
  <li data-href="#">Video 3</li>
  <li data-href="#">Video 4</li>
  <li data-href="#">Video 5</li>
</ul>
<iframe src="http://youtube.com/embed/XzbdY_rPtjw"></iframe>

---

iframe {
  width: 460px;
  height: 300px;
  border: 1px solid #eee;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}
li:hover {
  color: #666;
}

---

(function($) {
  $('ul li').click(function() {
    $('iframe').attr('src',$(this).data('href')); 
  });
})(jQuery);

Answer 2

实际上，除非真的需要，否则您实际上并不需要javascript。人们往往忽略了<iframe>只是一个框架，因此可以被target属性所针对。以下是的示例

<iframe width="500" height="500" src="about:blank" name="testframe"></iframe>
<a href="http://test.com" target="testframe">Test</a>
<a href="http://qwerty.com" target="testframe">Qwerty</a>

请在此处查看其实际操作：http://jsfiddle.net/LLnEU/