2021.11.02
【開発者向け】YouTube埋め込みを高速化するテクニック
YouTube埋め込みを軽くしたい
YouTubeを埋め込むiframeコードをそのままコピー・ペーストして挿入すると、サイト自体が重くなってしまったり、W3Cのスコアも低くなってしまいます。
そんな時、iframeタグに一手間加えて読み込みを高速化するテクニックをご紹介します。
プログラムの流れ
今回のテクニックはプラグインを使用せず、jQueryで対策する方法です。
プログラムの流れは以下になります。
- YouTubeから埋め込み用タグをコピー
- HTMLに軽量化用の埋め込みコードを記述
- jQueryでYouTubeURLから「サムネイルを取得・出力」の処理を実行
- jQueryで「クリックしたら動画で表示」の処理を実行
上記のプログラムを動かすことで、サイト読み込み時はYouTubeのサムネ画像を表示させ、クリックした時に初めて動画を読み込むのでサイト高速化に繋がります。
実際のコード
HTML
<div class="frame_wrap">
<div class="youtube">
<iframe data-src="https://www.youtube.com/embed/★動画ID★" allowfullscreen></iframe>
</div>
<div class="arrow"></div>
</div>srcは使用せずdata-srcとしてURLを記述し、ページ読み込み時には動画を出さないようにします。
レスポンシブ対応するためにframe_wrapというdivで囲んでいたり、静止画時の時に動画っぽくする矢印を表示するためarrowというdivを配置しています。
CSS
.frame_wrap {
position: relative;
width: 100%;
padding-top: 56.25%; /* 動画の比率 */
overflow: hidden;
}
.frame_wrap .arrow,
.frame_wrap .arrow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%,-50%);
}
.frame_wrap .arrow {
width: 56px;
height: 56px;
border-radius: 100%;
background-color: rgba(255,255,255,.8); /* 矢印背景色 */
pointer-events: none;
}
.frame_wrap .arrow::before {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 12px;
border-color: transparent transparent transparent #222; /* 矢印色 */
}
.frame_wrap img {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: auto;
transform: translateY(-50%);
}
.frame_wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}動画の比率や矢印の色などはお好みで変更してください。
jQuery
// 複数埋め込みにも対応するよう、youtubeというclassに対してループで処理
$('.youtube').each(function() {
var iframe = $(this).children('iframe');
// data-srcからURLを取得
var url = iframe.attr('data-src');
// URLから動画IDを取得
var id = url.match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
// 動画IDを使用してサムネイル画像を取得・配置
iframe.before('<img src="https://img.youtube.com/vi/'+id+'/sddefault.jpg" />').remove();
// 動画クリックした時の処理
$(this).on('click', function() {
// 矢印をフェードで非表示
$(this).siblings('.arrow').fadeOut(400);
// 動画IDからを埋め込み用タグを生成
$(this).after('<div class="youtube"><iframe src="https://www.youtube.com/embed/'+id+'?=loop=1&playlist='+id+'&modestbranding=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>').remove();
});
});HTMLのdata-srcに記述したURLから自動でサムネイルの取得やembed動画のURLを作成することで様々な手間を省いて汎用的に使用できます。
YouTubeのパラメータは1動画をループさせることで、動画終了後に関連動画などに離脱しないような設定になっています。こちらは任意で変更してください。
まとめ
いかがだったでしょうか？
多少手間はかかりますが、YouTube埋め込みによるスコアの低下やページの重さが目に見えて改善できるプログラムなので、ぜひお試しください。