WordPressのGutenbergで埋め込んだYoutube動画のレスポンシブ化

WordPressのエディタGutenbergから記事中にYoutube動画を埋め込んだ動画をレスポンシブ対応させるためのcssを備忘録として

埋め込もうとしている動画の前後には.wp-block-embed__wrapperが付加されるので、以下のスタイルをCSSに記載しておけばレスポンシブ化出来るはずです。

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

で、無事に埋め込みが完了しました。オマケとしてPDFを本文中に埋め込む際によく利用されているWordPressプラグインのPDF Embedderですが、こちらはレスポンシブ化されていますが左寄せになってますので、センタリングさせる場合のCSS

・PDF Embedderを中央寄せさせるCSS

div.pdfemb-viewer {
margin: 0px auto !important;
}

となります。