複数のYouTube動画を埋め込んでも重くならないようにする方法 - オバサンになりたい。
2016/4/27更新 スマホでも動作するよう対応しました こんにちは、錠前（ @jomae_yasushi ）です。 YouTube動画が大量に貼り付けられたページを開いてPCがクラッシュしそうになった経験、ネトサフをよくする人なら一度はあるかと思います。とにかく重いですよね〜 私も先日動画をふんだんに貼り付けた 楽曲紹介記事 を作ってみたのですが、30本の動画を埋め込んだページはノートPCでも表示に少し時間がかかり、スマホでは何度リロードしてもなかなか表示されないといった具合で、これはいかんと急いで対応策を調べました。 ネットのあちこちに書かれている色々な方法を試してみたのですが、JavaScriptの知識に乏しい私でも簡単に実践できた方法を以下に紹介します。ついでに知っておくと理解が深まる周辺知識もまとめてみました。 YouTube動画とサムネイルのURL YouTubeの動画ページ
YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - SHIROMAG
私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。 しかし、あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。 そんな悩みを抱えていたある日、下のような記事を発見しました。 追記:元ネタのブログが消えてしまいました。 おお！これこそ、私が探し求めていた記事だ！ この記事で紹介されているコードを参考に、もっと利用しやすいコードに修正してみました。 クリックすると動画が再生されるのが分かるように マウスホバー時のエフェクト YouTubeとは関係ない画像まで消えてしまう問題を解決 以上の3点を実装できるように、コードを改良しました。ブログ主の錠前さんの許可はいただいております。 YouTubeを大量に貼っても重くならないコード [はてなブログでの利用方法]まずはこちらのCSSをデザイン→カスタマイズ→デザイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
