ブログにYouTube貼ると表示が遅くなるので、早くなる対策してみた - ブックマークレット付き
前々から気にはなってたんですが。
YouTube貼ると、明らかに全体の表示が遅くなるんですよね。
これって、Googleさんからも嫌われるみたいで、検索結果の表示に影響するとかしないとか。
表示を早くする方法
既にいろんなサイトで紹介されています。
それをちょっとアレンジする形で、ブックマークレットなどを使って、より簡単に貼り付ける方法を紹介したいと思います。
スポンサーリンク
方法としては、
・ブログには、YouTubeのサムネイル画像を貼るだけ
・画像クリックで、YouTubeの動画を再生するiframeに書き換え
・オートプレーオプションで、iframe表示と同時に動画再生が始まる
つまり、画像をクリックすると、それに対応する動画の再生が始まる、という動きです。
なるほどね。
確かに、初期表示にたくさんのiframeがあったら、そら遅いわ。
クリックトリガで、都度書き換えれば、その時に初めて読み込まれるので、遅いとしても、一動画分に遅さが分散されて、体感的な遅さが感じずらい、と。
準備
ちょっとアレンジしてますので、それに即した形で記述しますね。ちなみに、はてなブログ前提にしてますが、準備に記述する内容は、要するに<head>タグ内に書かれてればいい話なので、WordPressでも何でも導入できるかと。
まず、ダッシュボードの設定より、詳細設定を選ぶ。
「headに要素を追加」というテキストエリアがあるので、そこで、以下をコピペする。
既にjQueryを読み込んでる場合は、先頭の1行はいらない。
これで、まず保存。
ブックマークレット
そしたら、下のブックマークレットを、ブックマークにドラッグ&ドロップ。あとは、YouTubeのサイトに行き、見たい動画のページを開いて、ブックマークレットをポン！
すると、以下のようにURLが取得できるので、これを記事に貼り付けるだけ。
ちなみに、以下は、ヒカキン動画のサンプル。画像クリックで、動画が再生される。
画像クリックで動画再生
いかがでしょう。そのままコピペで使えると思いますが、何か参考になればうれしいです。
ちなみに、Chromeで確認してます。他のブラウザで動かないなどあれば、コメください。時間があれば調べてみます。スポンサーリンク
{var p=location.search.match(/v=(.*?)(&|$)/); var h=undefined; if(p!=null)h=p[1]; if(h==null){alert('動画IDが取得できませんでした。');return;} function o(s){var d=window.open().document; d.writeln('<textarea rows=15 cols=80>'+s+'</textarea>');d.close()} o('<span style=\'font-size:small;\'>画像クリックで動画再生</span><br/><img class=\'yt-img\' src=\'https://img.youtube.com/vi/'+h+'/hqdefault.jpg\' width=480 height=360 data-video=\'https://www.youtube.com/embed/'+h+'?autoplay=1\'>');})();){kind=link}