最初は直書き＋CSSでiframeをレスポンシブ化したものの、headlessCMSのMarkdownに div 書くのは後々困る気がした。

このまま直書きでいくのか、画像のLightbox化で使った react-rehype をタグを置換するのか、プラグインを使うのかを決める。

---

Gatsby公式

公式プラグインを使ってみたら一発で理想型になったw

gatsby-remark-responsive-iframe | GatsbyJS

ちなみに、直書き＋CSSだと div でラップしてiframeをabsolute、16:9ならラッパーにpadding-top: 56.25%; を書いていた。

プラグインはアスペクト比を自動取得して上記のようなCSSをインラインで入れてくれるようなので、直書きするより筋がいい。もしスライドを貼ったとしても、それ用の比率でセッティングしてくれるんだろう。楽だねー。