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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

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

  • プラグインで制御する方法
  • 埋め込みのソースコードに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のブロックエディタを使っている場合に限る方法だから、思いっきり環境依存の対応方法になる。

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


  • このエントリーをはてなブックマークに追加
  • LINEで送る

コメントを残す

*