javascript - 使用 "onclick"函数加载视频嵌入来优化网页

Question

首先，抱歉我的英语不好。我想在单击按钮时将视频嵌入上传到网页。我想这样做是因为 facebook 嵌入视频很重，如果他们加载所有页面，则加载时间大约为 3/4 秒。我正在尝试使用 Jquery 来做到这一点，但我不知道该使用什么。此时我正在尝试使用“加载”功能...

这是一个非常简单的例子:

<button id="btn_id" class="btn btn-default" type="submit">Button</button>

<div class="embed-responsive embed-responsive-16by9" id="ld_video">    
<div>

<script>
  btn_id.onclick = function(){
  $("#ld_vid").load(<iframe src=".........);
  };
</script>

Answer 1

您所需要的只是一个按钮，单击该按钮即可动态更改 iframe 的 src 属性。这将在用户单击按钮时加载视频，而不是在用户访问网站时加载所有视频。这是如何实现这一目标的最小示例。

document.getElementById("myButton").onclick = function() {
  var iframe = document.getElementById("myIframe");
  iframe.src = "https://www.youtube.com/embed/6wUxpFu9Wvo";
  iframe.style.display = "";
}

<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton">Load video</button>

或者使用 jQuery

$(document).ready(function() {
  $("#myButton").on("click", function() {
    var $iframe = $("#myIframe");
    $iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
    $iframe.show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton">Load video</button>