ググれば出てくるよくある記述がこちら。

記述

HTML

<iframe class="defer" data-src="https://www.youtube.com/embed/..." ...></iframe>

javascript

function movie_defer() {
	var iframes = document.querySelectorAll('.defer');
	iframes.forEach(function(iframe){
		if(iframe.getAttribute('data-src')) {
			iframe.setAttribute('src',iframe.getAttribute('data-src'));
		}
	});
}
window.addEventListener('load', movie_defer);

解説

HTML側の記述

srcを使用しないことでHTMLのレンダリング中に動画の読み込みがスキップされます。

javascript側の記述

window.addEventListener('load', ...の記述で、読み込みがすべて終わった後に動画が読み込まれます。

注意！ この記述、IEでは動きません。

querySelectorAll で取得した物（上記記述でいうと iframes ）に対して、forEach() でループ処理する手法はIEに対応していないらしいです。 つまり、iframes.forEach() の形ではIEで動かないのです。

NodeList.prototype.forEach()
https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach

そこで、IEでも動くようにjavascriptの記述を修正します。

IEでも動く動画の読み込み遅延

javascript

function movie_defer() {
	var iframes = document.querySelectorAll('.defer');
	var iframe = Array.prototype.slice.call(iframes,0);
	iframe.forEach(function(iframe){
		if(iframe.getAttribute('data-src')) {
			iframe.setAttribute('src',iframe.getAttribute('data-src'));
		}
	});
}
window.addEventListener('load', movie_defer);

解説

querySelectorAll で取得した物（上記記述でいうと iframes ）を Array.prototype.slice.call で配列として取り出し、forEach()でループ処理します。

これでIEでも動画読み込み遅延が可能となります。