どうも、ふーです。
ブログでYouTubeの動画を埋め込みたい時、沢山埋め込んでしまうとページの読み込み時間が長くなってしまいますよね。それを改善してくれる素晴らしい方法がありました。実際に使ってみた感想と、簡単に使い方を紹介。
スポンサーリンク
活用した記事
今回活用した記事を紹介します。
この記事はこの後に紹介する記事の元になっている記事です。この記事の方法でもうまくいきますが、後で紹介する記事の方法の方が簡単なのでそちらをおすすめします。
この記事では、上の記事を参考に使いやすいようにカスタマイズしています。私が利用したコードはこちらからお借りしました。
こちらでは2つ目の記事「YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった」のコードを自動で作って作れるツールの解説です。
作り方
CSSコードを貼る
ブログのデザインのCSSに以下のコードを追加します。はてなブログでは「デザイン」→「デザインCSS」か「記事」に＜style＞で囲んで貼り付けます。私は、スマホでも使いたいので、「記事」のところに貼り付けました。
（「YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLE」より）
javaScriptコードを貼り付ける
記事の一番下に以下のコードを貼り付けます。動画がいくつあろうと、１つのページに１つだけあればいいので、フッターや記事下部分に貼り付けます。
（「YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLE」より）
HTMLを貼る
HTMLは「YouTubeを埋め込んでも重くならないようにする方法の『コードを自動生成するツール』を作ったよ」で紹介されている「ようつべタグぽん」というツールを使います。
はじめにYouTubeから動画のURLを取得。
コピーしたURLを「ようつべタグぽん」の「動画URL」に貼り付けます。
URLを貼り付けたら、サムネイルの大きさを選択します。ここの大きさはお好みで選択してください。
次に「タグを生成する」を選択
出来たコードをコピーして、記事内に貼り付けて完成です。
実際に完成したものがこちら
画像で表示されていますが、クリックすると動画に切り替わります。読み込みが早くなる上、簡単に出来るのですごくオススメです。
まとめ
記事の読み込み速度も改善されますが、記事を書く画面もすごく軽くなりますしこれは導入しておいて損は無いと思います。私は「そんなにYouTubeの埋め込みなんてしないよ〜」って思っていましたが、最近使うようになったので慌てて導入しました。
早めに導入しておくことをおすすめします。