使用JavaScript显示动态的YouTube视频

发布时间:2020-07-07 17:42

我正在为我的网站构建视频常见问题解答页面。

我的目标是在页面顶部嵌入一个Youtube视频,并在其下方列出问题列表。当用户点击特定问题时,我希望页面刷新并显示与该问题相对应的视频,该视频显示在页面顶部嵌入youtube的位置。

有人做过此事吗,并且对如何实现这一目标有任何建议?

回答1

您可以通过这种方式进行编码

<!DOCTYPE html>
<html>
<body>

<iframe id="youtube" width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>

<h2>something</h2>
<p onclick=qus1()>Question 1</p>
<p onclick=qus2()>Question 2</p>

<script>
  function qus1(){               
       document.getElementById('youtube').src="https://www.youtube.com/embed/GibiNy4d4gc?autoplay=1";
  }
  function qus2(){
       document.getElementById('youtube').src ="https://www.youtube.com/embed/o6Jo2hW6gHI?autoplay=1";
  }
</script>
</body>

</html>