読者です 読者をやめる 読者になる 読者になる

色々虎威 ゆるり

~IRO IRO TRY~

ブログにYouTube貼ると表示が遅くなるので、早くなる対策してみた - ブックマークレット付き

前々から気にはなってたんですが。
YouTube貼ると、明らかに全体の表示が遅くなるんですよね。
これって、Googleさんからも嫌われるみたいで、検索結果の表示に影響するとかしないとか。

表示を早くする方法
既にいろんなサイトで紹介されています。
それをちょっとアレンジする形で、ブックマークレットなどを使って、より簡単に貼り付ける方法を紹介したいと思います。

スポンサーリンク

まず、参考にさせていただいたのが、こちら。

もう、まんまいけます。
素晴らしいの一言。

方法としては、
・ブログには、YouTubeのサムネイル画像を貼るだけ
・画像クリックで、YouTubeの動画を再生するiframeに書き換え
・オートプレーオプションで、iframe表示と同時に動画再生が始まる
つまり、画像をクリックすると、それに対応する動画の再生が始まる、という動きです。
なるほどね。
確かに、初期表示にたくさんのiframeがあったら、そら遅いわ。
クリックトリガで、都度書き換えれば、その時に初めて読み込まれるので、遅いとしても、一動画分に遅さが分散されて、体感的な遅さが感じずらい、と。

準備

ちょっとアレンジしてますので、それに即した形で記述しますね。
ちなみに、はてなブログ前提にしてますが、準備に記述する内容は、要するに<head>タグ内に書かれてればいい話なので、WordPressでも何でも導入できるかと。

まず、ダッシュボードの設定より、詳細設定を選ぶ。
「headに要素を追加」というテキストエリアがあるので、そこで、以下をコピペする。


既にjQueryを読み込んでる場合は、先頭の1行はいらない。
これで、まず保存。

ブックマークレット

そしたら、下のブックマークレットを、ブックマークにドラッグ&ドロップ。

 YouTube貼り付けタグ取得

あとは、YouTubeのサイトに行き、見たい動画のページを開いて、ブックマークレットをポン!
すると、以下のようにURLが取得できるので、これを記事に貼り付けるだけ。

ちなみに、以下は、恋ダンスのサンプル。画像クリックで、動画が再生される。

画像クリックで動画再生

いかがでしょう。そのままコピペで使えると思いますが、何か参考になればうれしいです。

ちなみに、Chromeで確認してます。他のブラウザで動かないなどあれば、コメください。時間があれば調べてみます。

スポンサーリンク