ユーチューブ動画を自動できれいに表示

ワードプレスのメモ

2020年4月4日 WP5.4

WP5.4にしてみたところ、ブロックエディタがかなり良くなっていました。

PDFのダウンロードリンク、表にthが追加、など完全に実用域。これはもう真面目に取り組まなくては。

thが上にしか付けられない、、、あいかわらず、表はかゆいところに手が届かないです。

 

で、ユーチューブ動画の表示もテーマ依存ではなくきれいに表示してくれます。

下記の関数と思いっきりバッティングするので、ブロックエディタを使う場合は下記関数で適用されるCSSに細工が必要です。

ブロックエディタで編集すると「wp-block-embed__wrapper」みたいなクラスが付くので、こんな感じでリセットすると良いようです。

.wp-block-embed__wrapper .iframe-yt	{
	position: static;
	padding-top: 0;
	height: auto;
}

IEは「position: initial」「position: unset」などではリセットできませんので、「static」と明示します。

動画表示の整形方法

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

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

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

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

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

1:入力フォームを用意

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

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

2:ユーチューブのURLを自動で囲んじゃう

ビジュアルエディタにユーチューブの動画URLが挿入されたら、自動で「class=”iframe-yt”」などで囲んでしまう方法。

/* ---------- ユーチューブ urlを自動で囲う ---------- */
function yt_url($the_content){
if( is_singular() ){
	$the_content = preg_replace('/<iframe title=/i', '<p class="iframe-yt"><iframe title=', $the_content);
	$the_content = preg_replace('/<\/iframe>/i', '</iframe></p>', $the_content);
}
return $the_content;
}
add_filter( 'the_content', 'yt_url' );

※ビジュアルエディタの「ユーチューブのURLが挿入されたら、自動でiframe~/iframeで囲う」機能を利用しています。

※ACFプラグインのWysiwigカスタムフィールドでは動作しないようです。なんでだ?
the_contentだからか、、、

※pで囲っているのは、divだとURLを複数記述した際にHTML構文が崩れるためです。

※URLの貼り付けのみに対応したのは、iframeの場合「貼り付けろ」と提示されるソースコードが一定ではなく、動作しない場合があるためです。すべてのiframeに適用してしまうと、マップやアフェリエイトのiframeにも作用してしまいますので。

※「iframe title=」で始まる構文を見つけてdivを挿入する動作です。同じ構文のiframeがあるとユーチューブでなくとも挿入するので、ブログカードなどで誤動作しちゃいます。
「youtube」などの単語があったら、という条件を付ければいいと思いますが、jsなりjQueryなりが必要になりそうです。

使用例:ビジュアルエディタにURLを貼り付けるだけ