Feeds for YouTubeで、レスポンシブ対応のビデオギャラリーを作成

WordPressでは、YouTube動画を指定して埋め込むことができます。今回は、YouTube Feedで、レスポンシブ対応のビデオギャラリーを作成する方法を紹介します。

今回のDEMOは、動画ギャラリーです。

サムネイルをクリックすると、ライトボックスで表示され、再生されます。

設定

プラグインをインストール、有効化します。YouTube Feed＞設定をクリックし、設定画面が表示します。Connected YouTube Account＞＋ Add Sourceをクリックします。

アカウント設定画面に切り替わります。Connect to YouTube Through Googleをクリックして、画面に従って設定を進めます。設定が完了したら、WordPressの設定画面に戻るので、次へボタンをクリックし、ギャラリーを作成して行きます。

作成

左サイドメニューのさらに読み込むボタンをクリックします。背景色、マウスオーバー時の状態、テキストを設定します。

メニューのチャンネル登録ボタンをクリックします。背景、マウスオーバー時の状態、テキストを設定します。

メニューのカラースキームをクリックします。カスタムを選択し、背景をページの背景色に設定します。設定完了後、保存ボタンをクリックします。

設置

右上の埋め込むボタンをクリックします。ショートコードが表示されるので、コピーボタンをクリックし、コピーします。

設置したい場所に、ショートコードブロックを作成し、ペーストします。これで完成です。

プレビューで確認します。サムネイルをクリックすると、モダールウィンドウで開き、再生されます。左右の矢印をクリックすると次の動画が、自動で再生されます。

以上で今回の説明は終了です。YouTubeチャンネルをサイトに設置する時に便利なプラグインです。サムネイルは、リスト表示などもできるので、色々なデザインのサイトに対応できそうですね。