gatsby-remark-embed-youtube

記事にはコンテンツの埋め込みも出来たらと思っていたので、まずは YouTube 埋め込みをしてみました。
プラグインはこれがメジャーなのかなというものを使用。

npm install gatsby-remark-embed-youtube

// gatsby-config.js
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-embed-youtube`,
            options: {
              width: 800,
              height: 400,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
          },
        ],
      },
    },

公式ドキュメントを見てもgatsby-transformer-remarkの記載パターンしかなくて詰んでいたのですが、gatsby-plugin-mdxを使っている方は上記記載で上手く行きます。
Gatsby remark pluginsの記載方法です。
また、いい感じにレスポンシブしてくれる、プラグインgatsby-remark-responsive-iframeも一緒に導入してみました。

で、実際に埋め込んだ感じはこちらです。

https://www.youtube.com/watch?v=cAMsb7WTeA8&ab_channel=%E5%8C%BF%E5%90%8D%E3%83%A9%E3%82%B8%E3%82%AA

例えば上記 URL の YouTube 動画を埋め込みたいときは、

// mdxファイルの記載
`youtube:https://www.youtube.com/embed/cAMsb7WTeA8`

これで YouTube 動画の埋め込みが出来ました。