【GatsbyJS製ブログ】Youtubeの埋め込み（レスポンシブ対応も）

$ yarn add gatsby-remark-embed-youtube

plugins: [
…
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve: "gatsby-remark-embed-youtube",
          options: {　// 固定サイズにする場合に指定
            width: 800,
            height: 400,
          }
        }
      ]
    }
  },
…
}

…
{
  resolve: `gatsby-plugin-mdx`,
    options: {
      extensions: [`.mdx`, `.md`],
      gatsbyRemarkPlugins: [
        …
        {
          resolve: "gatsby-remark-embed-youtube",
          options: {　// 固定サイズにする場合に指定
            width: 800,
            height: 400,
          }
        },
        …

plugins: [
  "gatsby-remark-embed-youtube",     // ←こっちを先に書く
  "gatsby-remark-responsive-iframe"  
]

`youtube:https://www.youtube.com/embed/（動画のID）`

$ yarn add react-youtube

import YouTube from 'react-youtube'

…
 <YouTube videoId="（動画のID）">
…

…
<iframe className={styles.youtube}
  src={`https://www.youtube.com/embed/（動画ID）?autoplay=1`}　←ここに動画IDを指定すればiframeで読み込まれる
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>
…

import React, { useState } from 'react'
import * as styles from '../../styles/embedyoutube.module.scss'

const EmbedYoutube = ({id}) =>{ //※１　動画IDをもらう

    const [isThumbnail, setIsThumbnail] = useState(true); //※２　useStateでisThumbnailを管理

    return (
        <div className={styles.youtubewrapper}>
            {isThumbnail ? ( //※３　三項演算子。isThumbnailがtrueなら、サムネを取得して表示
                <img className={styles.youtube}
                    src={`https://img.youtube.com/vi/${id}/maxresdefault.jpg`} //※４　↓で解説
                    onClick={() => setIsThumbnail(false)} //※５　クリックされたらsetIsThumbnailでisThumbnailをfalseに変更
                    alt="サムネイル"
                />
            ) : ( //※３　三項演算子。isThumbnailがfalseなら（=サムネがクリックされたら）iframeでYoutubeを読み込む
            <iframe className={styles.youtube}
                src={`https://www.youtube.com/embed/${id}?autoplay=1`} //※６　受け取った動画IDを元にYoutubeを指定
                title="YouTube"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
            ></iframe>
            )}
        </div>
    );
}

export default EmbedYoutube

.youtubewrapper{
    margin-bottom: 50px;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    .youtube{
        width: 100%;
        height: 100%;
    }
}