wordpressエディタGutenbergのYoutube埋め込みをレスポンシブにするコード
![](https://taziku.co.jp/taziku_w_p/wp-content/uploads/2023/01/respon-youtube.jpg)
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動画が画面サイズに応じて自動的に調整されるようになります。
生成AI・AIの導入・研修・DXの支援はtazikuへ
生成AI・LLMなど、AIを活用したAIの導入・DXコンサルティング、AI領域の研修・講演などのご相談はお気軽にお問い合わせフォーム、もしくは生成AIソリューションDXAIから、ご相談・お問い合せください。