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>

使用“onclick”功能加载嵌入视频以优化网页

1 个答案: