如何创建一个以 HTML 格式播放 youtube 视频的按钮？答案

【问题标题】：How do I create a button that plays a youtube video in HTML?如何创建一个以 HTML 格式播放 youtube 视频的按钮？
【发布时间】：2019-05-05 00:21:32
【问题描述】：

我有以下代码。我的按钮工作正常，但我不知道你是如何使该功能工作的。

我的目标是创建一个按钮，单击该按钮会打开 youtube 视频的 iframe/使其可见。

<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
  <p><button class="w3-center center transparent_btn" 
onclick="play1()">go</button></p>
  </div>
</div>
</body>

<script>
function play1() { 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  }

【问题讨论】：

标签： html css iframe youtube youtube-iframe-api

【解决方案1】：

你需要有一个可以插入 iframe 的元素。

<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
  <p><button class="w3-center center transparent_btn" 
onclick="play1()">go</button></p>
  <div id="youtube-frame"></div>
  </div>
</div>
</body>

<script>
function play1() { 
    var frame = document.getElementById("youtube-frame");
    frame.innerHTML += "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
  }
</script>

【讨论】：

效果很好，谢谢！有没有办法在这个 play1() 函数中点击按钮后隐藏按钮？
我真的想通了！再次感谢！

【解决方案2】：

虽然 youtube 提供了一个 API 来控制播放器，但我会保持简单。首先，在你的 body 中添加一个 div 并给它一个你选择的 ID。你的 play1() 函数应该是这样的：

    function play1(){
      var player = '<iframe width="560" height="315" 
      src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0" 
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
      picture" allowfullscreen></iframe>';
      document.getElementById('ID').innerHtml = player;
    }

【讨论】：