こんにちは！
ブログ運営に関するちょっとした小ネタ・テクニックを自分への備忘録としてまとめていきます。
今回はYoutube動画の埋め込み方法とメリット・デメリット！そしてデメリットを解消する方法をまとめていきますよっ！
Contents
Youtube動画の埋め込み方法
まずは、Youtube動画の埋め込み方法を見ていきましょう！
正直Youtube動画埋め込み自体はめちゃくちゃ簡単。
実際にショーシャンクの空にという映画の予告動画を埋め込んでみましょう！
Youtubeで埋め込みたい動画を探して、
動画の右下にある共有という部分から
埋め込むという箇所を押すと、
このような画面になります。右にHTMLが表示されるのでそれをコピーしてワードプレスのテキスト編集エディタに貼り付けましょう！
実際に埋め込んだのがこちら！
めちゃくちゃ簡単ですね！
Youtube動画を埋め込むメリット・デメリット
さて、こんなに簡単に出来るYoutubeの動画埋め込みですが、メリットとデメリットがあります。
メリット：ユーザーの滞在時間が上がる
記事に関連のある動画を埋め込むことでユーザーを動画視聴に誘導し、ユーザーの滞在時間を上げることができます。
ユーザーの滞在時間が上がるとSEO的にも有利であると言われているため、検索結果の上位表示をねらうことができます。
ただ、闇雲に動画を埋め込んでいてはユーザー体験を損なってしまいユーザーの離脱を起こしかねません。
適切な量のユーザーにとって最適な動画を埋め込むことを意識しましょう！
デメリット：ページ読み込みが遅くなる
Youtubeの動画は読み込みに時間がかかるため、埋め込みすぎると非常に重くなります。
数個埋め込むだけであればそれほど問題ありませんが、いくつも埋め込むとページ読み込みに時間がかかりユーザビリティーを損なうことになります。
Googleが2018年7月にスピードアップデートを実装したことで、ページの読み込み速度はSEOに大きく影響するようになりました。
この流れは加速すると見られていて、ユーザビリティーを追求するためにはページの読み込み速度には注意しなければなりません！
ユーザーの滞在時間を延ばす効果のある動画ですが、そもそもページ読み込みが遅くなってユーザーが直帰してしまったら本末転倒。
読み込みを遅くせずに複数のYoutube動画を埋め込む方法があればなー・・・
それがあるんです！続いてはYoutube動画埋め込みのデメリットを打ち消す方法について見ていきましょう！
Youtube動画を複数埋め込んでも重くならない方法
CSS,jQueryを使うことで、動画そのものを埋め込むのではなくサムネイル画像を表示しておき、クリックされた時だけYoutubeから動画を呼び出すような仕掛けを作ります。
方法は非常に簡単！以下の記事を参考にやったら簡単にできましたよーっと。
jQueryの書き込み
まずは、以下のjQueryを記事内に書き込みます。
これによりサムネ画像を配置しておきながら、それがクリックされた時に特定のYoutube動画を再生するという仕掛けを作ることができます。
CSSの変更
続いて、CSS！先ほどのjQueryで仕掛けは作れたので見た目を変えていきましょう！
以下のコードをスタイルシートに書き込みます。「外観」の「テーマの編集」からスタイルシートを選んで編集しましょう！
ワードプレスの特定のテーマを使っている場合は「外観」の「カスタマイズ」からCSS追加が出来る可能性がありますのでお試しください！
ここで、”予告編を再生”という部分を変えるとサムネイル画像に重なる文字が変わります。僕の場合は映画を紹介する時に動画を埋め込むのでこのような字面にしております。
音楽のPV等を埋め込む場合は、別の文字にした方がよいでしょう！
ちなみに記事によって文字を変えたい場合は記事の本文にさきほどのCSSをstyleタグで囲んで書き込めば問題ありません。
HTMLで記述する
最後に埋め込みたい箇所に以下のHTMLを埋め込みましょう！
この時「動画ID？」の部分にはYoutube動画のURLに入っている「/watch?v=Cfcve3-Ur8k」赤文字部分を入れるようにしましょう！
この時、URLを変換するツールを別の方が作ってくれているので利用するようにしましょう！
これで出来上がったのがこちら！
おー！綺麗に出来上がった！
これでページ読み込みを遅くすることなくYoutube動画を埋め込むことができますね！
是非参考にしてみてください！
・Youtube動画を埋め込んでユーザーの滞在時間を延ばそう！
・Youtube動画埋め込みにおけるページ読み込み速度低下は防げる！
忙しくて書籍を読む時間のない、そこのあなた！！
まさにそんなあなたにピッタリのサービスがアマゾンオーディブル！！
アマゾンオーディブルなら好きな書籍が音声で聞ける！今なら無料で1か月で試せるのでぜひ試してみてください！
