WordPressでYouTube動画を埋め込み、ギャラリーに

通勤電車のなかで、待ち時間に、テレビを観ながら、話題の動画をオンデマンドで楽しむ毎日。 携帯デバイスの4G LTE化も手伝い、YouTubeは、いまや企業にとってプロモーションの必須ツールになった。

外部のサービスを自社サイトに取り込むのは、サービス提供サイトの仕様変更などに伴ってリスクがついてまわるが、それを補っても余りあるほど恩恵は大きいものだ。

今回は、YouTubeの公式チャンネルに登録した動画コンテンツをWordPressの記事に埋め込んだり、自社の動画ギャラリーとして公開する方法を紹介する。YouTubeを代表とする動画SNSの採用を検討する際の参考となれば幸いだ。

筆者おすすめ、とっつきやすい WordPress 参考書（１）
小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!
筆者おすすめ、とっつきやすい WordPress 参考書（２）
「いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方」
筆者おすすめ、とっつきやすい WordPress 参考書（３）
「Web担当者のためのWordPressがわかる本」

動画ギャラリープラグインは、企業サイトに馴染みにくい

WordPressには、動画ギャラリーに関するプラグインも数多く存在する。 しかし、評価の高いプラグインをざっと試したものの、個人ブログなら許される機能やフォーマットも、高機能すぎたり見せ方が奇をてらいすぎている感がある。企業サイトに導入するには馴染みにくいのではないかと考えている。

例えば、サムネイル画像をYouTubeが提示する3枚からしか選べなかったり、ギャラリーへの掲示件数が多くなると、YouTubeのサムネイル送出処理の時間が長くなり、ギャラリーページ自体の表示が極端に遅くなったりと、運用側でコントロールできない部分が出てくる。さらに、（プラグインを利用した場合によく遭遇する問題だが、）サイトのデザインテンプレートが組み込みにくいことも多かった。

WordPressで、専用の管理画面を準備するのがベスト

既成のプラグインを採用する際の不都合は、もちろんプラグイン自身を改造することで対応は可能だ。ただ、いざ改造に着手すると深みにはまり、帰還することが困難になってしまうこともあるため、当社では専用の管理画面をオリジナルで準備することにしている。

実のところ、専用のオリジナル画面を準備した方が、本稼働後にクライアント側で運用することを考えても、他のコンテンツと同じ管理画面上でメンテナンスできる方がいい。さらに、当社もシステムを管理する上で、オリジナルで構築した方が将来さらに手を入れることになっても見通しが良いのだ。

1.管理画面の仕様

YouTube動画を埋め込むための「専用管理画面」といっても、決して多機能なものではない。入力項目は、おおよそたったの４つだ。

• タイトル
• YouTube公式チャンネルに登録した、個々の動画URL
• サムネイル用画像の登録
• 動画を紹介するためのコメント

以下が、YouTube動画を管理するための専用画面のキャプチャだ。

これらの入力を実現するために、これまでにも幾度となく紹介している定番プラグイン「Advanced Custom Fields Plugin」を利用する。
すでにいくつかの記事を読んだ方には繰り返しになってしまうが、「Advanced Custom Fields Plugin」は簡単にいうと、オリジナルの管理画面を作るためのミドルウェア的なプラグインだ。

今回の動画ギャラリーにおいては、「Advanced Custom Fields Plugin」の機能のひとつである、「リピート項目」を利用することで、複数の動画を管理画面上でリスト化でき、運用が容易になる。掲示する動画の数が20件程度までであれば、リピート項目で一画面におさめるほうが管理しやすいからだ。

WordPressでCMS：製品関連情報の一元化をプログラムなしで実現

2.動画ギャラリーページの体裁

動画を掲示するギャラリーページのイメージ（ワイヤーフレーム）は以下の通り。
管理画面のリピート項目で登録した順に従い、表示してくれるようになる。

3.動画ギャラリーページでの再生

動画ギャラリーページ上での再生には、javascriptのライブラリー「jquery.colorbox.js」を利用している。「jquery.colorbox.js」は、ポップアップウィンドウを表示させるためのライブラリーの定番で、当社でも頻繁に活用させていただいているもの。

動画ギャラリーページ上のサムネイルをクリックすると、ウィンドウがポップアップして再生がはじまる。
右に掲載のキャプチャが、実際に動画を再生している様子だ。

外部サービスと自社WEBサイトとの連携

今回はYouTubeに登録済みの動画を「動画ギャラリー」にして、自社のWEBサイトへ埋め込み、2次利用する形式を示した。YouTubeが提供するURLを単純にページ上に張り付けるだけでも動画ギャラリーは実現できるが、アイキャッチとなるサムネイル表示や、動画の紹介コメントを付加すれば、オリジナリティーあふれる仕上がりとなる。

YouTubeに限らず多くのサービスが、WEBサイトにデータを掲示しやすいようにインターフェイスを提供してくれているが、ここにもうひと手間かけることであなたのWEBサイトを訪問してくれた人に対するアクセシビリティー、おもてなし度をもう一段向上させてくれるだろう。

筆者おすすめ、とっつきやすい WordPress 参考書（１）
小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!
筆者おすすめ、とっつきやすい WordPress 参考書（２）
「いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方」
筆者おすすめ、とっつきやすい WordPress 参考書（３）
「Web担当者のためのWordPressがわかる本」