Javascript - 包含 30 多个嵌入式 youtube 视频的页面 - 点击加载 iframe

Question

我想寻求帮助。我有从 youtube 嵌入的 30 多个视频的网页。我想在用户点击按钮时显示 1-2 个视频和其余视频。

目前，嵌入的视频是隐藏的，但我感觉它们也在后台加载。

点击按钮后显示视频和从 Youtube 加载的最佳方式是什么？

我当前的代码：

<center>
<button onclick="myFunction('kataguruma')" class="myButton">Show Kata-guruma</button> <br><br></center>
<p> </p>
<div id="kataguruma" style="display: none;">
<center>
<iframe src="https://www.youtube.com/embed/YrE62Dzg4oM" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0">
</iframe>
</center>
</div>

<script>// <![CDATA[
function myFunction(el) {
  var x = document.getElementById(el);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
// ]]></script>

Answer 1

我不确定我是否正确理解了您的问题，因此如果我错了，请纠正我。 假设您想在用户单击视频时播放视频。只需删除allow= "autoplay"

<iframe src="https://www.youtube.com/embed/YrE62Dzg4oM" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0">

如果您希望视频在页面加载时自动播放，您不仅需要添加allow="autoplay"，还需要在嵌入链接源的末尾添加?autoplay=1，就像这样。

<iframe src="https://www.youtube.com/embed/YrE62Dzg4oM?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0">

如果您只想在用户按下按钮时加载和插入 iframe。您可以在下面找到示例代码，看看它是否回答了您的问题。

//list of links 
let links = new Array ("https://www.youtube.com/embed/YrE62Dzg4oM",
                        "https://www.youtube.com/embed/YrE62Dzg4oM");

function myFunction(el) {
  var x = document.getElementById(el);
  if (x.style.display === "none") {
    x.style.display = "block";

    //loop through all the link which are in the list 
    for(i = 0 ; i < links.length ; i++){
    var ifrm = document.createElement('iframe');
    ifrm.setAttribute('id', "ifrm"+i ); // assign an id

    // assign url
    ifrm.setAttribute('src', links[i]);
    ifrm.setAttribute('width', '560');
    ifrm.setAttribute('height', '315');
    // Append the iframe to the div
    document.getElementById("kataguruma").appendChild(ifrm);
    }
    
  } else {
    x.style.display = "none";
    // remove all the iframes in the div when the button is pressed again 
    var node = document.getElementById('kataguruma');
    node.innerHTML = "";
  }
}

<center>
<button onclick="myFunction('kataguruma')" class="myButton">Show Kata-guruma</button> <br><br></center>
<p> </p>
 <iframe src="https://www.youtube.com/embed/YrE62Dzg4oM" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0" style="">
</iframe>

 <iframe src="https://www.youtube.com/embed/YrE62Dzg4oM" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0" style="">
</iframe>

<div id="kataguruma" style="display: none;">

</div>