jQuery iframeを後から読み込み

youtubeなどをホームページに埋め込もうとするとiframeタグで貼ることが主流です。

iframeタグで貼ると非同期であるものの、imgタグと同様にそのsrc属性に書かれている情報へアクセスします。

そのため、閲覧者が動画を見ようとしていなくても、動画のプレーヤーなどの準備が走ってしまいます。

さらにページの要素が表示し終わったタイミングで発動するJavaScriptなどを実装しているとその発動もどんどん遅くなってしまいます。

iframeをCSSで非表示にしても裏側で処理が走ってしまいます。

簡単に言うとブラウザの読み込みのクルクルが長くなるということです。

そこで、ユーザが動画を見ようとしたタイミングで、iframeのsrcを書き換えるサンプルを用意しました。

一般的なyoutubeの埋め込みソース

<iframe width="100%" height="240" src="https://www.youtube.com/embed/YJt7KRmv2bQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>iframe>

上記のソースを以下のように書き換えます。

<div id="movie_box">
<iframe width="100%" height="240" src="" src_data="https://www.youtube.com/embed/YJt7KRmv2bQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>iframe>
div>

src_dataという属性は実際存在しないので、読み込みは開始されません。

そして、それを差し替えるトリガーを作ります。

ここではボタンを押すと動画の準備を開始します。

youtube動画を準備する

$(".movie_view").on('click',function(){
	act_iframe_src_id("movie_box");
});

function act_iframe_src_id(act_id){
	$("#"+act_id).find('iframe').each(function() {
		if($(this).attr("src_data")){
		src_data = $(this).attr("src_data");
		$(this).attr("src",src_data);
		$(this).removeAttr("src_data");
		}
	});
}

上記のJSはmobie_boxというIDに囲まれたiframeタグで、src_data=""という属性に事前に仕込んでおいたURLを差し替えるという仕組みです。