wordpressエディタGutenbergのYoutube埋め込みをレスポンシブにするコード

2023年1月17日
Technology web

WordPressの標準エディタのGutenbergにYoutubeはURLを差し込むだけで簡単に埋め込むことができますが、そのままではレスポンシブに対応しておらず、PCサイズは個別にYoutube側のコードを調整すれば綺麗に収められますが、スマートフォン側ではPCのサイズがそのまま表示されレスポンシブ表示してくれません。

今日はWordpressのGutenbergでYoutube埋め込みをレスポンシブ対応するコードと其の方法を紹介します。

WordPressのテーマのCSSファイルにコードを追加

.wp-block-embed-youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.wp-block-embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSSをバックアップ取得もしくはChild Themeを作成する

テーマファイルを編集するため、あまりテーマに慣れていない方は、バックアップを取得してから進めるか、Child Themeを作成し、その中にCSSファイルを作成することをおすすめします。

レスポンシブ化されていることを確認

上手く反映できれば、ブログ記事に埋め込んだYouTube動画が画面サイズに応じて自動的に調整されるようになります。