如何显示使用 HTML 和 Javascript 中的 ID 单击的视频？

Question

我已经试过了，但是 2 个 js 函数不起作用。我希望它显示一个 iframe 并在按下按钮时隐藏标题，因为要显示多个 iframe，我需要一个使用每个 iframe 的唯一 ID 的可扩展系统。谢谢

<!DOCTYPE html>
<html>
<div id="000">
<div id="video">     
  <iframe style="position:relative;top:0;width:100%" src="https://www.youtube.com/embed/KfDB9e_cO4k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div id="title">
  <h3>Video 1</h3>
  </div>
  <button id='000' onclick="getId(this.id);showVideo();">Show</button>
</div>

<div id="111">
<div id="video">     
  <iframe style="position:relative;top:0;width:100%" src="https://www.youtube.com/embed/6dGYVKt1zw4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div id="title">
  <h3>Video 2</h3>
  </div>
  <button type="button" id='111' onclick="getId(this.id);showVideo();">Show</button>
</div>
</html>

<script>
function getId(clicked_id) {
   return clicked_id;
}

function showVideo() {
for (clicked_id) {
    document.getElementById('video').style.display = "block";
    document.getElementById('title').style.display = "none";
  }
}
</script>

<style>
#video {
  display: none;
}
</style>

Answer 1

参考下面的代码。

      const showVide = (id) => {
        const yt_frame = document.getElementById("youtube_frame");
        yt_frame.setAttribute("src", `https://www.youtube.com/embed/${id}`);
        yt_frame.style.display = "unset";
      }

<!DOCTYPE html>
<html>
  <body>  
    <iframe id="youtube_frame" style="position:relative;top:0;width:100%;display:none" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <h2>SOME TITLE</h2>
    <button onclick="showVide('bSOqMqMzN4Q')">Show</button>
    
    <h2>SOME TITLE</h2>
    <button onclick="showVide('jYOfvbD8HQ0')">Show</button>
  </body>
</html>

您可以使用任何后端动态列出视频，例如：PHP。 如果您使用的是PHP，那么您可以添加以下代码来代替显示按钮和标题列表。

<?php
  $videolist = array(
    array(
        "title"=>"Vishnu Stuti",
        "ytid"=>"bSOqMqMzN4Q"
      ),
    array(
       "title"=>"Visnu Stuti",
        "ytid"=>"jYOfvbD8HQ0"
    )
  );
  //ABOVE CODE WILL BE DYNAMIC, IF YOU USE ANY DATABASE, RIGHT NOW ITS JUST FOR EXAMPLE, SO IT IS     HARDCODED.
  foreach($videolist as $vid){
    echo "
      <h2>{$vid['title']}</h2>
      <button onclick='showVide(`{$vid['ytid']}`)'>SHOW</button>
    ";
  }  
?>

如何显示使用 HTML 和 Javascript 中的 ID 单击的视频？

How can I reveal the video that has been clicked using IDs in HTML and Javascript?

html

javascript

getelementbyid