YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった

投稿日：2016-05-21 更新日：2020-05-02

私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。

しかし、あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。

そんな悩みを抱えていたある日、下のような記事を発見しました。

追記:元ネタのブログが消えてしまいました。

おお！これこそ、私が探し求めていた記事だ！

この記事で紹介されているコードを参考に、もっと利用しやすいコードに修正してみました。

以上の3点を実装できるように、コードを改良しました。ブログ主の錠前さんの許可はいただいております。

[はてなブログでの利用方法]まずはこちらのCSSをデザイン→カスタマイズ→デザインCSSに入れて下さい。もしくはstyleタグで囲って記事の一番上に貼り付けてください。

記事内に入れる場合は、こちらのコード。CSSに入れた方が本当は良いですが、カスタマイズに慣れてない人は記事内に入れた方がスマホにも対応するので簡単だと思います。

これが、画像及び動画を埋め込むためのHTMLです。HTML編集など、みたままモード以外の編集方法で貼り付けてください。

動画IDというのは、貼り付けたいYouTube動画のURLの

watch?v=

の後にある文字列です。

https://www.youtube.com/watch?v=ru0K8uYEZWw

こういうURLだったら、動画IDは「ru0K8uYEZWw」ですね。

そして、記事の一番下にこのコードをコピペして下さい。みたままモードで貼り付けるとうまくいかないのでHTML編集に切り替えて、一番下に貼り付けてください。

上記のコードの以下の部分はjQueryを読み込むコードで、ヘッダーかフッターですでに読み込んでいたら削除して大丈夫です。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

シェアボタンのカスタマイズなどしている人は、すでにこのコードが記述されていると思います。

んで、実際に貼ってみたのがこんな感じ。クリックすると画像より大きめのYouTube動画が埋め込まれます。

なんで画像が小さいのかと言うと、スマホ対応するのが面倒だからwww

テスト用のブログで試しに大量のYouTube動画を埋め込んでみました。
brooklyn.hatenablog.jp
どうでしょう。YouTubeをたくさん貼ってる割にはかなり読み込みが速いと思います。

実際にブログで使用する際は、PCとスマホで動作確認して下さいね。

あと、ご利用は自己責任でお願いします。不具合等あっても、責任は負いかねます。

他にもこんな記事書いてます。