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

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かったのアイキャッチ画像

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

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

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

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

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

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

  • クリックすると動画が再生されるのが分かるように
  • マウスホバー時のエフェクト
  • YouTubeとは関係ない画像まで消えてしまう問題を解決

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

YouTubeを大量に貼っても重くならないコード

[はてなブログでの利用方法]まずはこちらの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とスマホで動作確認して下さいね。

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

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

ブログで副業やお小遣い稼ぎする方法大公開。ASPやアクセスアップ術も – NO TITLE

www.notitle-weblog.com
www.notitle-weblog.com
www.notitle-weblog.com

コメント

  1. defender_21 より:

    質問です。
    記事下にはるコードですが<デザイン→記事下>に記載しておけば記事単位で入力する必要はなくなりますか?

  2. shiromatakumi より:

    コトリさん
    大丈夫だと思います。PCとスマホ両方に貼るのと、動作チェックはお忘れなく〜!

  3. defender_21 より:

    あざます!挙動見てみます

  4. guniverse より:

    はじめまして、こちらの記事を拝見させて頂きすごいっ!!と思いました。そこでWordPressにおいて応用可能かなぁ。と思ってちょっとやってみたところできたので記事にさせて頂きました。
    ですが、
    もし、書き方など訂正等が必要でしたら訂正等致しますのでよろしければご確認お願い申し上げます。
    記事URL:http://izu.wpblog.jp/post-2202/

  5. shiromatakumi より:

    id:guniverse
    はじめまして。スマホでも動作しているので、特に問題はなさそうですね。
    まだWordPressでは試していないので、私もやってみます。

  6. varevo より:

    こんにちわ。お忙しいとこすみません。
    シロマティさんが先日公開したCSSコードを改変して、タイトルを表示できるようにしました。(タイトルの挿入は自由で、挿入しない場合は”Click to Play”が表示されます。)
    これを公開する許可を頂けるとありがたいんですがいかがでしょうか?

  7. shiromatakumi より:

    Liab (id:varevo)さん
    無問題ですよ~

  8. varevo より:

    ありがとうございます!
    公開後、何か問題あったら言って下さい!よろしくお願いします!

  9. guniverse より:

    シロマティさん、
    お久しぶりですm(__)m。
    jqueryのCDNに関してですが、
    //ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
    を以下に簡単にまとめたページにて非同期属性(async)を付与すると、
    (http://izu.wpblog.jp/post-2636/)
    一応、こちら方法でクリックしてYouTube動画が見れるようにはあるのですが、
    ご紹介されていらっしゃるCDNの「ajax.aspnetcdn.com」を、
    //ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

    「//ajax.googleapis.com/」
    部分を
    「//ajax.aspnetcdn.com/」
    に変更すると、
    YouTube動画がクリックしても動作しなかったり、
    「Click to Play」
    は表示されるものの背景にYouTube動画のサムネイル画像すら表示されなくなってしまいました。
    ですが、
    ajaxの内容を確認すると、
    全く同じなのです。
    今は、
    非同期化をやめて、
    「http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js」
    にて設定してあります。
    「//ajax.aspnetcdn.com/」に変更しても、
    ajaxの記載内容は同じなのに、
    なんでうまく動作しなくなってしまうのでしょう…。
    お忙しい中、恐縮ですが…。
    なにか、お分かりでしたら、
    何卒ご教授お願い申し上げます。

  10. shiromatakumi より:

    id:guniverseさん
    .com/以下の部分も若干違いますが、こちらは間違いないでしょうか?

  11. guniverse より:

    シロマティさん、お返事ありがとうございます。
    (・_・;…。
    ほんとだすね…。
    すみません。
    ちゃんと、表示されましたm(__)m。
    でも、
    なんとなく表示速度が、1.12.3の方が速い気がするので、1.12.3にしてみています。
    お騒がせしてすみませんでした。
    また、
    お返事、本当にありがとうございます。

  12. guniverse より:

    シロマティさん、
    いつもお世話になります。m(__)m
    引用元ブログ消えてなくないですか?
    それとも、復活されたのかなぁ…。
    以下のURLでおばさんになりたいっていうブログですよね?
    //www.obanari.com/entry/2016/04/25/205610
    今現在、表示されてましたので取り急ぎ報告まで。

  13. shiromatakumi より:

    id:guniverse
    わーお!ご報告ありがとうございます!
    私が見た時には消えていたので復活されたようですね。
    ちょっと心配だったので一安心です。

  14. SikisimaHisayuki より:

    素晴らしい記事ですね!さっそく自分のブログでも使わせていただきたいと思います。大丈夫でしょうか?

  15. shiromatakumi より:

    WEPLI.2 (id:SikisimaHisayuki)さん
    どうぞどうぞ、ご自由にお使いください。
    ちなみに、音楽記事のAmazon売上はいかがですか?
    うちは全然ですwwww

  16. SikisimaHisayuki より:

    ありがとうございます!
    Amazonの収入は月数千円ですw貼る意味なしですわ。iTunesからも月数万円程度なので、完全に趣味記事です。ただ、100枚やり遂げた達成感は半端なかったです(笑)

  17. guniverse より:

    シロマティさん、
    お久しぶりです。(o*。_。)oペコッ
    YouTube動画の遅くならない方法の元記事の「おばさんになりたい」
    また、なくなってしまっていますね。
    取り急ぎのご報告まで。m(__)m

  18. shiromatakumi より:

    id:guniverseさん
    報告ありがとうございます!
    また消えてしまってますね…。記事を書き換えておきます(;O;)

  19. chihiro_dayori より:

    はじめまして。ちひちひろです。この度こちらの記事を見て、youtubeがとても軽くなりました♬出来れば記事で紹介したいのですが宜しいでしょうか。はてなブログでの言及になります。

  20. shiromatakumi より:

    ちひちひろ (id:chihiro_dayori)さん
    ありがとうございます!ぜひぜひ言及お願いいたします!

  21. chihiro_dayori より:

    有難う御座います!!
    任せて下さい!!(‘ω’)/

  22. NUu より:

    シロマティさん、こんにちは!以前からこの方法を使わせて頂いていまして、大変助けられている者です!ありがとうございます\(^o^)/
    ですが最近、この方法を使って記事を作成し →【下書きを更新する】もしくは記事を【公開する】のボタンを押すと、『Bad Request』のページが表示されて、下書きを書いたり、記事を公開することができないんです。。。
    お忙しい中、すみません。何か原因や改善方法をご存知でしたら、教えていただけますと幸いです。よろしくお願い致します。
    (素人ながら自分なりに色々と試した結果わかったことは、この記事で説明されている『そして、記事の一番下にこのコードをコピペして下さい』のコードを、編集中の記事内に入れると、【下書きを更新する】や【公開する】が『Bad Request』となってできないみたいです)

  23. shiromatakumi より:

    カエル (id:NUu)さん
    コードは問題なく動くので、おそらく、埋め込んいる動画に問題があるのかもしれません。
    参考記事。
    http://apicodes.hatenablog.com/entry/hatena_badrequest

  24. NUu より:

    参考記事を教えていただき、ありがとうございます!
    動画を何も埋め込まなくても、『Bad Request』になるんですよねー(ToT)
    多分、僕側の何かが問題だと思うので、また色々とやってみますね!
    シロマティさん、ご返信ありがとうございました!(^^)

  25. ara-meosto より:

    はじめまして、こんにちは。
    こちらのYouTube貼り付けを軽くするコード、大変便利で重宝させて頂いています。
    1点質問なのですが、動画を途中から指定することは出来ないでしょうか?
    YouTubeで再生開始時間を指定して共有出来るので、このコードでも使用できたら便利だと思いまして……。
    例)1分45秒から再生指定したい場合、YouTubeでは「https://youtu.be/FlsCjmMhFmw?t=1m45s」とリンクが生成されますが、これをこちらのコードで使えないですかね…….?

  26. ballooon より:

    はじめまして、言及させていただきます。m(_ _)m

コメントする

お気軽にコメントしてください!!

名前・メールの入力は任意です。