Lazy Load for Videos:YouTubeなどの動画を遅延ロードできる

2017年2月12日

以前、画像の遅延ロードができるプラグインとして「Lazy Load」を紹介しました。

画像ファイルとは違って、利用頻度は頻度は少ないでしょうが、
YouTube などの動画の URL を記事に貼りつける場合もあるでしょう。
そうするとページの読み込み時間に画像ファイルよりも大きく影響するかと思います。

そのような時に便利な WordPress 用プラグインがあります。
「Lazy Load for Videos」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。

Lazy Load for Videos

Lazy Load for Videos - WordPress.org

Lazy Load for Videos は、Youtube もしくは、Vimeo の動画をプレビュー画像に置き換えてくれます。
そして、プレビュー画像がクリックされた時に動画を読み込んでくれます。

記事を作成もしくは更新時点でのバージョン:v 2.2.3
マルチサイトでの利用:可

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Lazy Load for Videos – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Lazy Load for Videos」と入力します。

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Lazy Load for Videos を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

各種設定

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

プラグインを有効化すると上の画像のようなメッセージが表示されます。
特に気にする必要もないので、
「Lazy Load for Videos」リンクをクリックして設定画面へ移動します。
通常は、「設定」メニューの中にある「Lazy Load for Videos」メニューから移動できます。

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

ダッシュボードの「設定」メニューの中に「Lazy Load for Videos」メニューが追加されています。

General/Styling

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

  • Only load CSS/JS when needed
    必要なときにだけ CSS/JS ファイルを読み込むかどうか。
  • Responsive Mode
    レスポンシブモードを有効にするかどうか。
  • Play Button
    プレビュー画像上に表示させる再生ボタンのアイコンの形状を選択できます。
  • Thumbnail Size
    サムネイルのサイズを設定します。
  • Custom CSS
    カスタム CSS を入力できます。
  • Schema.org Markup
    Schema.org マークアップを使用するかどうか。ベータ版の機能です。
  • Support for TablePress
    チェックを付けると TablePress で作成されたテーブルに YouTube や Vimeo の URL を貼り付けることができます。
  • Attribution
    このプラグインに関する情報を表示するかどうかを指定します。
    「No attribution」か「Link attribution」のどちらかで良いと思います。

Youtube

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

  • Disable Lazy Load for Youtube
    YouTube 動画の遅延読み込みを無効にするかどうか。
    チェックを付けると無効になります。
  • Display Youtube title
    YouTube 動画タイトルを表示するかどうか。
    チェックを付けるとプレビュー画像にタイトルが表示されます。
  • Pre-roll/post-roll ads
    すべての動画を再生リストに変換し、自動的に追加します。
  • Thumbnail quality
    サムネイルの画質を設定します。
  • Player colour
    プレイヤーの色を設定します。
    このパラメーターは廃止されました。

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

  • Colour of progress bar
    プログレスバーの色を設定できます。
  • Hide annotations
    「チャンネル登録」のような注釈を非表示にするかどうか。
  • Hide title/uploader
    動画のタイトルとアップローダーなどの情報を非表示にするかどうか。
    サムネイル画像に影響します。
  • Hide related videos
    動画の最後に表示される関連動画を非表示にするかどうか。
  • Hide player controls
    YouTube のプレイヤーコントロールを非表示にするかどうか。
  • Support for widgets
    チェックを付けると、YouTube の URL をテキストウィジェットに貼りつけることができるようになります。

Vimeo

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

  • Disable Lazy Load for Vimeo
    Vimeo 動画の遅延読み込みを無効にするかどうか。
  • Display Vimeo title
    Vimeo 動画タイトルを表示するかどうか。
    チェックを付けるとプレビュー画像にタイトルが表示されます。
  • Colour of the vimeo controls
    Vimeo のコントロールの色を設定できます。

使い方

Youtube 動画などの URL を投稿や固定ページに挿入します。
挿入する URL は、1 行に収まるようにして、ハイパーリンクも貼らないようにします。
Youtube iframe を挿入することは、非推奨。遅延読込はサポートされません。
動画 URL を挿入したら、あとは公開するだけです。

※場合によっては、キャッシュを削除する必要があります。
※プレビュー画像が表示されない場合は、投稿エディタを開き投稿を更新します。

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

このプラグインを有効化する前に既に動画を公開していた場合には、
「変更を保存」ボタンの下の「Update Posts」ボタンをクリックして全ての投稿を更新します。

表示例

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

プラグインを有効化する前だと上のような感じになります。

WordPressプラグイン「Lazy Load for Videos」のスクリーンショット

プラグインを有効化すると上のような感じになります。

代替プラグイン

Lazy Load for Videos にほしい機能が無かった場合には、
Lazy Load for Videos 以外にも遅延ロード(遅延読込)できるプラグインを記事にしています。
以下では、Lazy Load for Videos を含めて 9 個を簡単に紹介しています。

遅延ロード(遅延読込)できるWordPressプラグイン一覧

URL

Lazy Load for Videos – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています

遅延読込

Posted by 管理人