To Load A Video Embed Using "onclick" Function To Optimize A Web Page

First of all, sorry for my bad English. I would like to upload a video embed to a web page when I click a button. I would like to do this because facebook embed videos are heavy an

Solution 1:

All you need is a button that when clicked- dynamically changes the src attribute of the iframe. This will load a video when the user clicks the button instead of all the videos load when the user accesses the website. Here is a minimal example of how to achieve this.

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

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

Or using jQuery

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

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