CSSだけで、WordPressエディタGutenbergのYouTube表示を横幅いっぱいにする

1ヵ月以内

WordPressエディタのGutenbergでYouTube動画を挿入(エンベット)する方法はいろいろありますが、動画のURLをそのまま貼り付けるのが一番楽ちんです。

URLをそのまま貼り付けたらエディタ上で自動でエンベットしてくれます。

記事画面では横幅が500pxに固定される

ですが、実際の記事画面では動画サイズが横幅500pxに整形されてしまいます。

これを横幅いっぱいに拡大したい。

CSSだけで解決する

これを、プラグイン無し、function.php編集なし、CSSだけで行います。

Gutenbergからパブリッシュされるhtmlはこうなっています。

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
	<div class="wp-block-embed__wrapper">
		<iframe title="The Main Squeeze - &quot;Man In The Mirror&quot; (Michael Jackson)" width="500" height="281" src="https://www.youtube.com/embed/ko5roiJR8EY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
	</div>
	<figcaption class="wp-element-caption">Man In The Mirror covered by The Main Squeeze</figcaption>
</figure>

iframe要素の中に勝手に width と height の値が書き込まれています。この値をエディタ上で修正する事はできないようです。
ので、親の親の<figure>要素にこれまた勝手に加えられているclassである .wp-embed-aspect-16-9 や .wp-has-aspect-ratio を使ってレイアウトを指示する事にします。

上記の例は動画のアスペクト比が16:9の場合を示していますが、Gutenbergではエンベットする動画のアスペクト比を自動で読み取り4:3の動画では .wp-embed-aspect-4-3 のclassを加えるようになっています。

以上より、CSSをこうします。

.wp-embed-aspect-16-9.wp-has-aspect-ratio iframe {
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
}

.wp-embed-aspect-4-3.wp-has-aspect-ratio iframe {
	width:100%;
	height:auto;
	aspect-ratio:4 / 3;
}

16:9と4:3以外のアスペクト比にも対応する場合は都度CSSを加える必要がありますが、当ブログはこの2種類だけでこと足りているようですので、上記としています。

これで動画の横幅を100%で表示する事ができました。