たったの1行でWordPressに埋め込んだYoutubeの動画がレスポンシブに対応する方法

WordPressにYoutubeの動画を埋め込んでスマホで閲覧してみると、残念なことに画面から動画がはみ出てしまった。

レスポンシブ対応のテーマを利用しているから勝手にリサイズされるのかと思ってしまった。というかテーマがどうのとかではなく、WordPressが便利というのもあって思った通りに勝手に再現されるなんて甘い考えで過大評価しすぎていた。

ザックリと調べた結果としては、次の二通りのパターンで対策する方法が目立っていた。

後者のHTML追記でCSS制御というのが主流っぽいからそのまま真似しようと思って、HTMLをトレースしていると、埋め込んだ動画のソースコード付近で下記のような気になる要素を見つけた。

<div class="wp-block-embed__wrapper">

これをさらに調べてみるとWordPress5.0から導入されたブロックエディタ「Gutenberg（グーテンベルク）」を使って動画を挿入した場合に適用されるクラス名ということが分かった。

下記のページによると、Gutenbergで埋め込んだ動画がレスポンシブに対応する機能を有効にする記述があるというのを確認した。

Contents

対応方法

function.phpに下記のソースコードを追記する。

add_theme_support( 'responsive-embeds' );

あくまでもWordPress5.0から新しく導入されたGutenbergのブロックエディタを使っている場合に限る方法だから、思いっきり環境依存の対応方法になる。

前述した二通りの対応方法が検索結果として目立つのは、そういった理由からだろう。