jQueryを使ってYouTube読み込みタグ（iframe）を軽くする

ホームページ内に動画を設置する際にYouTubeを利用する場合は多い。
YouTubeの埋め込み自体は、対象の動画ページから埋め込みタグを取得して設置することで可能ですが、読み込みに時間がかかるため軽量化してほしいとの相談があったので解決した時の実装方法をメモ

HTML

<ul class="youtube__list">
<li>
<div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div>
</li>
<li>
<div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div>
</li>
<li>
<div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div>
</li>
</ul>

jQuery

$(function(){
	
	var fast_movies = [];
	var fast_movies_w = [];
	var fast_movies_h = [];
 
	$('.youtube__fast iframe').each(function(index, element) {
		var fast_srcs = $(this).attr('data-src');

		fast_movies[index] = fast_srcs.split('/');
		fast_movies_w[index] = $('.youtube__fast').width();
		fast_movies_h[index] = $('.youtube__fast').width() * 0.5625;
		//置き換え
		$(this).after('<div class="youtube__play" style="height: '+fast_movies_h[index]+'px"><img src="https://img.youtube.com/vi/'+fast_movies[index][fast_movies[index].length -1]+ '/maxresdefault.jpg" width="' + fast_movies_w[index] + '" height="'+fast_movies_h[index]+'"></div>').remove();
		
	});
	
	$('.youtube__play').each(function(index, element) {
		$(this).hover(function(){
			$(this).after('<div class="youtube__frame"><iframe width="'+fast_movies_w[index]+'" height="'+fast_movies_h[index]+'" src="https://www.youtube.com/embed/'+fast_movies[index][fast_movies[index].length -1]+'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>').remove();
		});
	});
});

CSS

.youtube__list {
	display: flex;
	width: 1100px;
	margin: 20px auto 0;
}
.youtube__list li {
	width: 350px;
}
.youtube__list li + li {
	margin-left: auto;
}
@media screen and (max-width: 768px) {
	.youtube__list {
		display: block;
		width: 97%;
	}
	.youtube__list li {
		width: 100%;
	}
	.youtube__list li + li {
		margin: 10px 0 0;
	}
}

.youtube__frame {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.youtube__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.youtube__play {
	position: relative;
	cursor: pointer;
}
.youtube_play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.youtube_play::after {
	content: "";
	display: block;
	background: url(YouTubeアイコン.png);
	background-size: 100% auto;
	width: 70px;
	height: 50px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

初回読み込み時にYouTubeの読み込みタグ（iframe）を画像に置換。
オンマウス時に再置換してYouTubeタグに戻しています。
スマートフォンではマウスオーバーが使えないためクリックが一回分増えます。

• Youtube 動画の埋め込みで遅いページの高速化
• YouTube動画の埋め込みを軽くする