※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

当サイトはご覧になってる機器がダークモード時は自動でダークモード用レイアウトに切り替わります。

埋め込みYoutubeはサムネイル画像で置き換え軽量化

キャプチャ画像

SIRIUSテンプレート【Volar】には、ページ表示高速化の一環としてデータ量の少ないYoutube動画のサムネイル(静止)画像だけを表示させ、動画再生時に初めてYoutube動画データを読み込むようにするデータ軽量化機能が搭載されてます。


Youtube動画サムネイル画像表示とは

Youtube動画をサイトで表示させたい時、どうしてます?

 

普通はYoutubeの”動画の埋め込み”機能で発行されるコードをそのまま貼り付けるんじゃないでしょうか。

 

ただこれだと動画が再生される・されないにかかわらずページを開いたときに動画データが全部読み込まれてしまうため、ページ表示速度に少なからず悪影響を及ぼします。

 

こんな時はYoutube動画のサムネイル(静止)画像データだけ●●を読み込ませておいて、必要な時に(再生時に)初めて動画データを読み込むようにすればページが少しでも軽くなる→ページ表示の時間短縮につながるってもんです。

 

最近よく見かけませんか?

 

Youtube動画の再生ボタンをクリックしたのにすぐには動画が再生されず、再度同じ再生ボタンが表示されてもう一度クリックするとようやく動画の再生が始まるサイトを。

 

あれはとりあえずデータの軽いYoutube動画のサムネイル画像だけを表示させといて、そのサムネイル画像がクリックされて初めてYoutube動画データが読み込まれて再生が始まるという仕組みだったりするわけですよ。

 

Googleさんはページの表示速度も検索結果の順位に大いに影響すると公言してますから、効果のありそうなテクニックはどんどん取り入れていこうということで、テンプレート【Volar】にもこの仕組みを取り入れてみました。

 

専用のHTMLコードも専用のスタイルも設定済みなので、あなたがやることはこのあとご紹介する(表示させたい)Youtube動画のIDを調べてコピー&ペーストするだけです。

サムネイル画像表示の概要

Youtube動画のIDの調べ方ですが、ページ内に表示させたいYoutube動画をYoutubeサイトで開きます。

 

その時表示されるURL内の11桁の英数字が動画IDになります。

実際にはコチラ↓の赤下線の部分です。

 

キャプチャ画像

 

【共有】→【埋め込む】で表示される下の赤下線部でも取得できます。

 

キャプチャ画像

 

この動画IDを、【Volar】側で用意している専用のHTMLコードを貼り付けたあと指定した箇所にコピー&ペーストするだけで、今回の機能がすぐに有効化されます。

 

実際のサンプルDEMOがこちら↓になります。

 

ご覧になってる(表示されてる)のはただの静止画像です。

 

このあと再生ボタンをクリックすると”実際の”Youtube動画の再生画面に変わります。

(静止画像と見た目は変わりません)

 

その後にもう一度再生ボタンをクリックすると動画が再生されます。

 

Youtube動画
Youtube動画

 

仕様上、再生ボタンの2度押しが必要になりますが、慣れれば”そういうもんか”と思ってもらえます。

 

以上です。

 

こんなのもたまに見てます。

 

Youtube動画
Youtube動画

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア