GatsbyJSでiframeタグを使う

ちょっと書評の仕事が来たのでこのブログを書いた。
その時、Amazonリンクを書評だから貼ってしまおう！と言うことで実装した。

gatsby-remark-responsive-iframeを使う

こういうiframeタグを使う場合は、gatsby-remark-responsive-iframeを使う。

gatsby-remark-responsive-iframeをインストール

npm install --save gatsby-remark-responsive-iframe

gatsby-config.jsmの設定

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [`gatsby-remark-responsive-iframe`],
    },
  },
]

実際の動作確認

それではAmazonリンクをiframeで入れてみよう。 widthとheightを入れないと動かないので注意が必要。

出来た！