記事内に動画を貼り付ける機会は多々あるだろう。しかし、如何せん読み込みに時間がかかるため、ページの利便性を損なう可能性がある。SEOの観点からも何とかした方がいい。今回はYouTube動画について対応していく。
YouTube動画だけ後から読み込む方法
再生されるかわからない動画の読み込みに時間をかける必要はない。つまり、動画を見る気がある時だけ読み込ませればよいのだ。
これには、jQueryを使用し、再生ボタンが押された時に動画を読み込ませる手法を用いる。
簡単なコードは以下の通り。
ソースコード
<div class="movie" youtube="https://www.youtube.com/embed/動画ID">
<img src="https://img.youtube.com/vi/動画ID/maxresdefault.jpg" alt="" />
</div>ページ読み込み時、動画のダミーとしてサムネイルのみを表示させるコードである。
YouTubeは動画投稿時に自動で数種類のサイズのサムネイルが生成されている。一番大きいサイズのmaxresdefault（1280*720）を使用すれば画質の心配はない。
<script>
$('.movie').click(function(){
video = '<iframe src="'+ $(this).attr('youtube') +'" frameborder="0"></iframe>';
$(this).replaceWith(video);
});
</script>サムネイルをクリック（タップ）すると、動画を読み込んで再生可能な状態にするコード。
replaceWithは文字列を置き換えるライブラリだ。
.movie { /* 枠の設定 */
position: relative;
width: 80vw;
margin: 10px auto;
}
iframe { /* 動画サイズ */
display: block;
position: relative;
width: 80vw;
height: calc(80vw * 0.5625);
margin: 10px auto;
}
.movie img { /* ダミーサムネ */
width: 100%;
height: auto;
}
.movie:hover { /* ダミーホバー時 */
cursor: pointer;
}
.movie::before { /* ダミー再生ボタン */
content: url("image/play.png");
position: absolute;
top: 50%;
left: 50%;
transform : translate(-50%,-50%);
opacity: 0.5;
transition: all 0.5s;
}
.movie:hover::before { /* ダミー再生ボタンホバー時 */
opacity: 1;
}サムネイルだけ表示すると動画なのかわからない可能性があるため、再生ボタンの画像を重ねる。
検証
本来なら本記事内で検証したいところだが、当サイトはワードプレスで運用しており、脱jQueryテーマである【PR】SWELLを使用している。
そのため、動作は別のページで確認することにした。
余裕のある方は上記ページの表示速度とクリックイベントの挙動を確かめてほしい。短めのYouTube動画が10個貼られたペラサイトである。
考察
結果は一目瞭然であった。Webサイト運営に多数の動画コンテンツを利用されている方は、今一度ページ速度の枷になっていないか確認し、遅いなら試す価値はあるだろう。
課題としては、1回クリック（タップ）しただけでは動画再生されないこと。こちらはクリックで動画が読み込まれる旨を添えれば大きな問題はないと思われる。また、ワードプレス等の枠組みの中では、CSSが干渉して再現性が下がる恐れがある。上手くいかない場合は、ご使用の環境に合わせてコードやカラムを調整されたし。
以上おわり。
コメント