ユーチューブの埋め込みを半自動できれいに表示

ワードプレスのメモ

0:記事を書いた後、

ふと思いついてテーマ「2020」を見てみると、jsで制御しているようです。要望が多かったのでしょう。

「2020」は色々面白そうなので、そのうち調べてみます。

 

「ユーチューブの動画を埋め込みたい!」という要望はとても多いのですが、お客様にとって簡単、スマートな方法がなかなか無いです。

ビジュアルエディターにURLを貼ればとりあえずプレーヤーは表示されますが、縦横比が維持されないケースが多いと思います。

縦横比はCSSで制御することになりますが、iframeをdivなどで囲むしかないっぽいのが痛い。

<div class="movie-iframe">動画url</div>

クラスも含めてお客様が記述するのはなかなかハードルが高い、、、

1:入力フォームを用意

カスタムフィールドでURLを入れるフォームを用意してあげれば簡単ですが、表示される場所が固定されてしまいます。

動画紹介の投稿がそれなりにあるのならフォーマットが決まっていた方が良いと思いますが、ブログの中にたまーに登場する、程度だとこれは窮屈。

2:iframeを自動で囲んじゃう

本文中にiframeが出てきたら、自動でdiv class=”movie-iframe”などで囲んでしまう方法。

こちらの記事が分かりやすいです。コピペできっちり動作しました。

https://takayakondo.com/wordpress-youtube-responsive/

function movie_iframe($the_content){
if( is_singular() ){
	$the_content = preg_replace('/<iframe/i', '<div class="movie-iframe"><iframe', $the_content);
	$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter( 'the_content', 'movie_iframe' );

ただ、iframeが出てくると無差別に囲っちゃうので、マップなども同じクラスで囲まれます。

マップが同じ縦横比でも違和感は無いですが、縦横比を変えたい時に困る。

検索条件を付けてあげれば完璧と思いますが、ちょっと難しい。

3:ショートコード

1、2より原始的になってきますが、記述を少し簡単にしてあげる、というパターン。

 

こんな感じでショートコードを作って、

function movie( $atts, $content = null ) {
	return '<div class="movie-iframe">' .  $content . '</div>';
}
add_shortcode('movie', 'movie');

 

ビジュアルエディタにはこう書きます。

[movie]
ユーチューブURL
[/movie]

※[]は実際は半角[]

※改行は必須です。改行しないとただURLが表示されるだけ。

「div class=”movie-iframe”」が「movie」に簡略化されただけですが、敷居は下がるかと。

表示例



 

以上、決定打が出なかったメモでした。