Gatsbyでyoutubeを埋め込む

前回の記事を作成するにあたって、Youtube 動画を記事に埋め込みたくて調べました。
gatsby-remark-embed-youtubeというプラグインとgatsby-remark-embedderというプラグインを見つけました。

gatsby-remark-embedder の方が新しく多機能なため、これを使おうとインストールしてみたのですが、Gatsby v3 には対応していないようで

Could not resolve dependency

のエラーが出てしまいました。
どうしたものかと調べていたら、--legacy-peer-depsを入れてインストールしても使えるよ、という記事を見つけました。

やってみた所、無事に機能しました！
node 周りのバージョン管理は難しいですね。

ちなみに、v3 で使えることが分かったので、Gatsby のバージョンを 3.0.2 -> 3.2.1 にしてみました。
その他諸々もアップデートをした所、

warning  Imported JSX component SEO must be in PascalCase

というエラーが大量に…。
SEO というコンポーネントをパスカルケースで書けと。
とりあえず全て Seo と書き直した所エラーは消えました。
このことで警告が出たのでしょうが、アプデによって今まで true だった allowAllCaps がデフォルトに戻ったんですかね。
誰かわかる方教えて下さい〜！

アプデメモ

gatsby-plugin-feed                ^3.0.0  →   ^3.2.0
 gatsby-plugin-gatsby-cloud        ^2.0.0  →   ^2.2.0
 gatsby-plugin-google-analytics    ^3.0.0  →   ^3.2.0
 gatsby-plugin-google-gtag         ^3.1.0  →   ^3.2.0
 gatsby-plugin-image               ^1.0.0  →   ^1.2.0
 gatsby-plugin-manifest            ^3.0.0  →   ^3.2.0
 gatsby-plugin-offline             ^4.0.0  →   ^4.2.0
 gatsby-plugin-react-helmet        ^4.0.0  →   ^4.2.0
 gatsby-plugin-sass                ^4.0.2  →   ^4.2.0
 gatsby-plugin-sharp               ^3.0.0  →   ^3.2.0
 gatsby-plugin-typography          ^3.0.0  →   ^3.2.0
 gatsby-remark-copy-linked-files   ^3.0.0  →   ^3.2.0
 gatsby-remark-images              ^4.0.0  →   ^4.2.0
 gatsby-remark-prismjs             ^4.0.0  →   ^4.2.0
 gatsby-remark-responsive-iframe   ^3.0.0  →   ^3.2.0
 gatsby-remark-smartypants         ^3.0.0  →   ^3.2.0
 gatsby-source-filesystem          ^3.0.0  →   ^3.2.0
 gatsby-transformer-remark         ^3.0.0  →   ^3.2.0
 gatsby-transformer-sharp          ^3.0.0  →   ^3.2.0
 react                            ^17.0.1  →  ^17.0.2
 react-dom                        ^17.0.1  →  ^17.0.2
 typeface-merriweather             0.0.72  →   1.1.13
 typeface-montserrat               0.0.75  →   1.1.13

原因はどいつだ！(慎重にやれ