YouTube の動画をネタに感想を書いて記事を投稿するときに、感想を書きたい元の動画がアイキャッチだと画面の構成がシンプルになって見やすくなると思って、アイキャッチを YouTube の動画にする方法を試してみた。
理想的な形は、ブログのインデックスなどで小さく使われるアイキャッチはサムネイル画像で表示し、本文中の一番上に表示されるアイキャッチを動画で表示したいという考えで進めている。
Featured Image by URL をカスタマイズ
アイキャッチを直リンクできるプラグインを調べて、Featured Image by URL を利用してみた。
アイキャッチを直リンクしようと思った経緯は、YouTube は動画のダウンロードを禁止していて、ブログなどで利用するときは、iframe を使って貼り付ける直リンク的な方法を許可している。サムネイルもサーバに保存するのはダメかもしれないので、直リンクの方がいいだろうと思った。また、YouTube の API でも、サムネイルの情報を取得できるので、直リンクでの利用は問題ないだろうと判断した。
直リンクのプラグインを使うなら、サムネイルの URL を Featured Image by URL を使ってアイキャッチとして登録する。本文中のアイキャッチを表示するときに、YouTube のサムネイルならフックして動画を表示するようにタグを書き換えるというのがスマートな構成だと考えた。
この方法は調べている途中で断念した。理由は後述する。
また、断念を後押しした理由として、現行バージョンでテストされていないということもある。プラグインは更新が止まると不具合の対応が必要になる場合がある。特に、表示に関するプラグインは、既に投稿されいるページにも影響する場合も多く、手戻りを考えるとあまり使いたくない。
Featured Video Plus を使う
調べているうちに、動画をアイキャッチにできる Featured Video Plus というプラグインの存在を知り試してみた。
このプラグインは何年も更新されていなかったので、正常に動かないだろうという気持ちで試してみたら、本文でアイキャッチが表示されなかった。
しかし、これは調べていくうちに、プラグインの問題ではなく Cocoon のテーマと相性が悪いのが原因であると分かった。
深く調査しなかったので予想なのだが、おそらく、Cocoon ではアイキャッチは画像を使うことしか想定しておらず、Cocoon の tmp/eye-catch.php に書かれている処理をみると、フックでは対応できなそう。CSS を駆使すれば表示できるかもしれないが、バージョンアップでメンテをしていかなければいけないかもと考えると面倒なので、深追いするのはやめた。
別の問題ではあるが、Featured Video Plus は、管理画面の投稿一覧のレイアウトが崩れる。他でも影響が出そうなので、Cocoon との相性の問題がなくても、更新が止まっていることもあり多分使わない。
Featured Video Plus の挙動で気になったのが、アイキャッチを動画に設定するとその動画のサムネイルがメディアに保存されていた。おそらく、サムネイル画像をアイキャッチとして保存して、表示するときにフックで動画に変換しているのではないかと予想。
処理の方法の話ではなく、サムネイル画像をサーバに保存することは問題ないと考えてよいのだろうか？
Cocoon の機能に近いものがあった
Cocoon 設定の画像タブにアイキャッチ自動設定を有効にするという項目があり、これを有効にしておくと、動画のサムネイルがアイキャッチになる。
- 本文中の最初の画像をアイキャッチに設定
- 本文中にYouTube動画が埋め込まれている場合は動画のサムネイルをアイキャッチに設定
- 本文中に画像とYouTube動画がある場合は、優先的に画像がアイキャッチに設定
- アイキャッチが保存されるタイミングは、公開や更新などの保存のタイミング
- アイキャッチが設定済みの場合は、変更されない。
動画よりも画像が優先されるので、動画のサムネイルをアイキャッチにしたい時は、先に動画を埋め込んでから下書き保存をしておけばよい。
この挙動もサムネイル画像をサーバに取り込んでいるので、サムネイル画像をサーバに保存することは問題ないと考えることにする。
本文のアイキャッチを非表示にする
現在 YouTube 動画の使い方で想定しているのは、本文の一番上に表示することなので、サムネイルをアイキャッチとして表示し、そのすぐ下に動画が表示されるのは少しくどくなる。
その為、アイキャッチを動画にする方法の代替案として、動画を一番上に持ってくる場合は本文のアイキャッチを非表示にする。
.eye-catch-wrap{display:none}本文のアイキャッチは、表示しないという運用方針にするなら、Cocoon 設定の画像タブに本文上にアイキャッチを表示するの項目のチェックをはずしておけばよい。
この方法でも本文の一番上にアイキャッチ用の画像を貼り付ければ、自動でアイキャッチを生成して、インデックスでもアイキャッチが表示されるので、カテゴリのラベルが表示されないなどはあるが、見栄えも手間もほとんど変わらない。
動画の埋め込みを中央寄せにする
動画をアイキャッチ代わりにしようとすると、埋め込まれた動画が左寄せになっているのが気になったので中央寄せに変更した。
.video-container {
margin-left:auto;
margin-right:auto;
}動画の幅をレイアウトいっぱいに表示する
埋め込み動画と考えるとレイアウト幅いっぱいに表示すると少し大きい感じがするが、アイキャッチと考えるとレイアウト幅いっぱいの方が自然な感じがする。
.video-container {
max-width:100%;
}
コメント