ウェブページを最適化するための "onclick"機能を使用してビデオを埋め込むには

Question

まず、私の悪い英語をお詫びします。 ボタンをクリックすると、Webページに埋め込みビデオをアップロードしたいと思います。 Facebookの埋め込みビデオは重く、すべてのページを読み込むと読み込むのに約3/4秒かかるので、これをやりたいと思います。 私はJqueryでそれをやろうとしていますが、私は何を使うべきか分かりません。私は「ロード」機能をしようとしている。このとき ...

これは非常に単純な例です：あなたが必要とするすべてのclicked-たときには、動的src属性を変更することをボタンで

<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のユーザーがウェブサイトにアクセスしたときに、すべての動画が読み込まれる代わりに、ユーザーがボタンをクリックすると動画が読み込まれます。これを達成するための最小限の例がここにあります。

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>