Lazy load videos and sticky controlの使い方と設定
YouTube 動画の遅延ロードと固定表示ができる WordPress 用プラグインの紹介です。
それは「Lazy load videos and sticky control」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Lazy load videos and sticky control
Lazy load videos and sticky control には、以下の機能があります。
YouTube 動画の遅延読み込み。プレビュー画像のみを表示。
1 つのページで複数の動画をサポート。
一度に 1 つの動画のみを再生します。他の動画を再生すると、その動画を一時停止します。
動画から離れてるようにスクロールすると、動画を固定表示します。
独自のカスタム CSS を追加することもできます。
記事を作成もしくは更新時点でのバージョン：2.0.0
インストール手順
Lazy load videos and sticky control をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Lazy load videos and sticky control – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Lazy load videos and sticky control」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Lazy load videos and sticky control を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
管理画面の「設定」メニューの中に追加されています。
使い方
クラシックエディターを開いて「LLVASC」アイコンをクリックします。
YouTube 動画の ID を入力し「OK」ボタンをクリックすると、
ショートコードが挿入されます。
Gutenberg エディターには未対応なので、以下のショートコードを記述します。
[lazy-load-videos-and-sticky-control id = “Youtube-video-ID"]
あとは、投稿を保存もしくは更新します。
そして、ページをプレビュー表示などをして確認しましょう。
設定
Sticky position:
スクロールさせると再生中の動画を固定表示する位置を選択します。
表示例
実際に表示させると上のような感じで表示されます。
再生中のみ有効です。