ブロックのyoutube埋め込みをレスポンシブにする

ブロックエディターになってから、youtubeはiframeを自分で入力しなくても、URLを入れるだけで埋め込みに対応するようになりました。デフォルトのままではレスポンシブになりませんので、幅100%表示のレスポンシブにするための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%;
 }

「.wp-block-embed-youtube」がデフォルトで付与されるCSSですので、そこにレスポンシブ用のCSSをつけるだけ。簡単です。PCの時、このままだと幅100%で大きくなりすぎる場合もありますので、その場合の調整には別途CSSが必要です。