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

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

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

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

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

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

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

スポンサードリンク

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

記事内に入れる場合は、こちらのコード。記事内に入れる方がスマホにも対応するので楽だと思います。

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

動画IDについては、↓↓こちらの記事を参考にして下さい。
複数のYouTube動画を埋め込んでも重くならないようにする方法 - オバサンになりたい。

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

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

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

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

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

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

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

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

今回のコードはあくまでも一例で、画像のサイズや動画のサイズなども変えられるので、詳しくはこちらの記事をご覧ください。
www.obanari.com

本当に助かりました。ありがとうございます。

NO TITLE