iframeビデオを読み込んでロードできないようにするには

Question

ビデオを<iframes>に追加していますが、ビデオを表示したいときに表示/ロードされないように、すべての動画を読み込みます）。

ページ上で100本の動画を想像してみてください。すべてのものを先に読み込みたくありません。しかし、必要なときだけ。しかし、私はソース（つまり、埋め込みコードを）管理者

Answer 1

ため、それは簡単にするためにページに表示したいのですが、彼らは ショー/トリガは、私が表示したいそれまではいけないので、私は彼らが何かに含まれていることにしたいですあなたがビデオを再生したいまで、ビデオ（したがって、すべての tehのビデオのものをロード）

は<video></video>要素でsrc属性を含めないでください。 属性を<video>要素に追加すると、video要素の​​,.play()を呼び出してビデオを再生できます。

Answer 2

あなたの質問は信じられないほど明瞭ではありません。あなたのページが本当にゆっくりと読み込まれないように、iframeをその場で読み込む方法があるかと尋ねています。

答えは「はい」です。これを実行する方法はたくさんありますが、どの実装が最適かはわかりませんが、ここでは少し解説します。

showFrame = function(url, id) { 
 
    var iframe = document.querySelector(id); 
 
    iframe.style.display = "block"; 
 
    iframe.src = url; 
 
}; 
 

 
hideFrame = function(id) { 
 
    var iframe = document.querySelector(id); 
 
    iframe.style.display = "none"; 
 
    iframe.src = ""; 
 
}; 
 

 
toggleFrame = function(url, id) { 
 
    var iframe = document.querySelector(id); 
 
    if (iframe.style.display == 'none') { 
 
    showFrame(url, id); 
 
    } else if (iframe.src == url) { 
 
    hideFrame(id); 
 
    } else { 
 
    showFrame(url, id); 
 
    } 
 
};

body { 
 
    margin: 0; 
 
} 
 
.menu { 
 
    width: 30%; 
 
    float: left; 
 
} 
 
.menu button { 
 
    width: 100%; 
 
    padding: 50px; 
 
} 
 
#iframe_cont { 
 
    width: 70%; 
 
    height: 100%; 
 
    min-height: 500px; 
 
    float: right; 
 
}

<div class="menu"> 
 
    <button onclick="toggleFrame('https://www.google.com/maps/embed','#iframe_cont')">Example 1</button> 
 
    <button onclick="toggleFrame('https://youtube.com/embed/C0DPdy98e4c','#iframe_cont')">Example 2</button> 
 
    <button onclick="toggleFrame('https://youtube.com/embed/-YGDyPAwQz0','#iframe_cont')">Example 3</button> 
 
</div> 
 

 
<iframe id="iframe_cont" frameborder="0" style="display:none;"></iframe>