MENU

GatsbyへのYouTube埋め込み

2020-12-06

Embed Youtube Video in MDX.

前回のエントリーで記事内にYouTubeを埋め込みました。

GatsbyにYouTubeを埋め込むためにはプラグインを使うのが簡単です。gatsby-remark-embed-youtubeという名前そのままのプラグインもありますが、今回はオプションがいろいろあるgatsby-remark-embed-videoを使うことにしました。

プラグインのインストール

yarn add gatsby-remark-embed-video

gatsby-config.plugins.js

  {
    resolve: `gatsby-plugin-mdx`,
    options: {
        gatsbyRemarkPlugins: [
            {
                resolve: `gatsby-remark-images`,
                options: {
                  maxWidth: 650,
                  quality: 80,
                  showCaptions: true,
                  linkImagesToOriginal: true,
                },
            },
            {
                resolve: "gatsby-remark-external-links",
                options: {
                  target: "_blank",
                  rel: "nofollow"
                },
            },
            /* ここから */
            {
              resolve: "gatsby-remark-embed-video",
              options: {
                width: 650,
                ratio: 1.77,
                related: true,
                noIframeBorder: false,
                urlOverrides: [
                  {
                    id: 'youtube',
                    embedURL: (videoId) => `https://www.youtube-nocookie.com/embed/${videoId}`,
                  }
                ]
              }
            },
            /* ここまで追加 */
            'gatsby-remark-prismjs',
        ],
  },

設定はこれだけです。

使い方

張り付け方は3パターンあります。

`video: https://www.youtube.com/embed/UhsHNGMmyZ4`
`youtube: https://www.youtube.com/watch?v=UhsHNGMmyZ4`
`youtube: UhsHNGMmyZ4`

どれでもできます。以上です。

この記事を共有