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

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

新エディタGutenberg（グーテンベルク）だと簡単

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

• プラグインで制御する方法
• 埋め込みのソースコードにHTMLを追記してCSSで制御する方法

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

なんだこれは？

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

気をつけてほしいけど、これを記述するわけではない。

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

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

https://www.webdesignleaves.com/pr/wp/wp_blockeditor_styles.html

対応方法

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

add_theme_support( 'responsive-embeds' );

注意事項

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

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