こんにちは、ティウェブ藤園です。

動画を埋め込んだWebサイトをよく見かけるようになりました。

Webサイトに動画を埋め込むにあたっては、
YouTubeに動画をアップして、それをWebサイトに
表示させる方法がよく使われている手法と思います。

ですが先日、１ページに80個以上（！）の
YouTube動画を一覧化して埋め込む案件があり、
加えてスマートフォンサイトということで、
いかに軽量化するかを考える必要がありました。

※ちなみに、80個以上のYouTube動画を
通常の埋め込み方法であるiframeタグの貼り付けで行うと、
ページが重すぎて読み込みエラーとなり、ページ自体が表示されませんでした。。。

■動画のサムネイル画像を使う

実は、YouTubeはサムネイル画像は簡単に取得できることをご存知でしょうか？

– サムネイル画像呼び出し例

– サムネイル画像を埋め込むコード

「YouTube動画のID」は、
アップロードした動画の再生ページのURLの末尾、
「watch?v=XXXXXXXXXX」の、「v=」の後の英数字を入れてください。

<img src="//i.ytimg.com/vi/YouTube動画のID/mqdefault.jpg" alt="">

※今回使用している「mqdefault」は320px×180pxサイズの画像です。

はじめはサムネイル画像だけを表示し、
ユーザーが再生したい動画を選択してはじめて動画データを読み込むようにすれば、
遅延読み込みよりも手軽に１ページのデータ量を軽量化することができます。

■デモ

実際にサムネイル画像を埋め込み、
クリックした際に動画を読み込む形にした例を記載します。

一見して、通常のiframeの埋め込みと差異はないように見えますが、
実際は動画のサムネイル画像のみを読み込んで、
その上に再生ボタンの画像を重ねただけの形となっています。

サムネイル画像から直接YouTubeにリンクする形でも問題はありませんが、
今回はWebサイトからの離脱を防ぐため、jQueryを使用してページ内でモーダルが開く形にしています。

※jQueryのモーダル系プラグイン「Magnific Popup」
https://dimsemenov.com/plugins/magnific-popup/

■デモのコード

<!-- CSS読み込み -->
<link rel="stylesheet" href="./css/magnific-popup.css">

<!-- 動画のリンク、サムネイル呼び出し -->
<p class="md_iframe_image">
	<a href="//www.youtube.com/watch?v=YouTube動画のID" class="md_popup-iframe">
		<img src="//i.ytimg.com/vi/YouTube動画のID/mqdefault.jpg" alt="">
	</a>
</p>

<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" async=""></script>
<script>
	$(window).on('load', function(){
		$('.md_popup-iframe').magnificPopup({
			type: 'iframe',
			mainClass: 'mfp-fade',
			removalDelay: 200,
			preloader: false
		});
	});
</script>

.md_iframe_image {
	background: #fff;
}
.md_iframe_image a {
	border: 2px solid #fff;
	display: block;
	position: relative;
}
.md_iframe_image a:hover {
	opacity: 0.6;
}
.md_iframe_image a::before {
	background: url(サムネイルに重ねる動画再生ボタンの画像) center center / 64px 64px no-repeat;
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin: -32px auto 0;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 1;
}
.md_iframe_image a img {
	width: 100%;
}

■まとめ

回線環境もずいぶん進化しており、重いWebサイトでも
それなりに表示されるようにはなってきていますが、
やはり動画となるとなかなかページが読み込まれずにイライラ……
ということも少なくないかと思います。

スムーズに表示されないページはユーザーの離脱率も高くなります。
ティウェブではこういった手法をはじめ、お客様によりよいWebサイトを
提供できるよう日々、研究や工夫を重ねています。