WordPressの記事一覧のサムネイルに動画を埋め込んで再生できるようにしたい

Question

前提・実現したいこと

WordPressで動画紹介メディアを作成しています。

記事一覧のサムネイルをYouTubeやViemo動画にして、再生ボタンをクリックすることでポップアップで再生されるようにしたいです。
(ゆくゆくは自分でアップロードした動画を再生できればと思っています。)

記事への遷移はタイトルクリックを考えています。

投稿フォーマットやプラグインなどいろいろ試したのですが、どうしてもうまくいかないため今回質問させていただきました。

YouTubeのサムネイル画像を記事のサムネイル画像にもってくるものはいくつかあったのですが、動画をそのまま埋め込んでくれるようなものはほぼありませんでした。

試したプラグイン

■Featured video plus
動画の埋め込みはできたのですが、すでに更新されていないプラグインのためか、ポップアップでの再生ができませんでした。

参考サイト

youtube動画の紹介に特化したwpテーマでサイトを作りました

イメージとしてはこちらで紹介されているものが近いです。
別の機能もほしいため、こちらの記事で紹介されているものではないテーマを使用しています。
→NUMERO

記事のサムネイルの再生ボタンを押すと、その場でポップアップ再生されるイメージです。

Answer 1

動画をlightbox風に出すプラグインがあります。

Easy FancyBox

また、ポップアップすると自動で再生も始まります。

<a class="fancybox-youtube" href="https://www.youtube.com/watch?v=●●●">テスト</a>

classに追加するだけなので簡単に使えます。
youtubeを再生する場合、設定の「youtube」のチェックボックスをお忘れなく。

「記事一覧のサムネイルをYouTubeやViemo動画にして、再生ボタンをクリックすることでポップアップで再生されるようにしたいです。」とのことですが、これはループの中を触る必要があるので、

カスタムフィールド等でURLを入れておき、ループ内でクラスの付与とURLの出力で実現できると思います。

Comments

[saku615]

ご回答ありがとうございます。

サムネイルに動画を埋め込むことはできたのですが、iframeで埋め込んでいるためEasy FancyBoxのクラスをつけることが難しそうです…。

[beginner_t]

記事一覧をiframeで読むのですか？

[saku615]

いえ、記事一覧の各記事のサムネイルの部分に動画を埋め込んでいます。

記事のサムネイル(iframeで埋め込んだ動画)をクリックすると動画が再生され、タイトルをクリックすると記事ページに遷移する形です。

[beginner_t]

なるほど。このプラグインならサムネイルに画像を設定し、それを囲むaタグのクラスに宛てないといけないですね。サムネイルが画像でいいのであれば、youtubeのサムネイル画像をのURLを参照することもできるので、それを使えばサムネイル画像も動画のIDから自動でとれますよ。

[saku615]

できれば画像やテキストをクリックすることでポップアップ再生が始まるのではなく、iframeで埋め込まれたYouTube動画をポップアップで再生したいです。

Answer 2

どうにか解決できました