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

PR

ブログを書いていて「ここにあのYoutubeを埋め込みたい!」もしくは「自分の作ったYoutubeを紹介したい!」ということがあると思います。ちなみに実際Youtubeの埋め込みをしている記事がコチラです。

ということで、今回はGatsbyでつくったブログ記事にYoutubeを埋め込む方法を3パターン説明します。ブログのパフォーマンスを考慮したり、レスポンシブ対応も解説していきます。

また、Gatsbyのブログですので、マークダウンやMDXで形式で使える方法を紹介していきます。

クマ

自分の環境にあったやり方でやってみてください!

「マークダウンは知ってるけど、MDXって?」という人はコチラの記事も見ていただけると嬉しいです。

この記事はこんな人にオススメ
  • GatsbyでマークダウンやMDXにYoutubeを埋め込みたい!
  • Youtubeを埋め込みたいんだけど、パフォーマンスも気になるし、レスポンシブ対応もしておきたい!
目次

方法1.gatsby-remark-embed-youtubeを使う

gatsby-remark-embed-youtubeというプラグインを使います。マークダウンやMDXに簡単に埋め込むことができますが、ちょっとカスタムしにくいです。

まずはyarnもしくはnpmでインストールします。

$ yarn add gatsby-remark-embed-youtube

gatsby-config.jsに以下の記述を加えます。

マークダウンの場合、gatsby-transformer-remarkのoptions→pluginにgatsby-remark-embed-youtubeを追加。

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

MDXの場合、gatsby-plugin-mdxのoptions→gatsbyRemarkPluginsにgatsby-remark-embed-youtubeを追加。

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

ちなみにgatsby-remark-responsive-iframeを使用している場合はgatsby-remark-responsive-iframeよりも先にgatsby-remark-embed-youtubeを指定してください。

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

あとはマークダウンやMDX内に以下の要領で記述すればYoutube動画が埋め込まれます。簡単!

`youtube:https://www.youtube.com/embed/(動画のID)`

動画のIDは、動画を再生しているときのURL「https://www.youtube.com/watch?v=jVuF05skA7A」のココや、実際に Youtubeに動画を上げている人は、動画リンクの「https://youtu.be/jVuF05skA7A」ココにあります。

方法2.react-youtubeを使う

方法1だと細かい調整ができないので、パーツ化やレスポンシブ対応などをしたい人はこちらをオススメします。

まずはyarnもしくはnpmでインストールします。

$ yarn add react-youtube

ただ埋め込むだけなら、適当なjsファイルでインポートしてYoutubeタブを使うだけです。videoIDに先ほど調べた動画のIDを渡してください。

import YouTube from 'react-youtube'

…
 <YouTube videoId="(動画のID)">
…

JSXの記述として書けるので、パーツ化やレスポンス対応がしやすいです。ただ、マークダウンではJSXは使えないので代わりにMDXで書く必要があります。

方法3.iframeを使う

わかりやすい方法です。動画IDがわかればiframeを使って埋め込むことができます。

…
<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>
…

最近はプラグインを極力使わないようにしているので(Gatsby製の自分のブログで、いざ本番!という状況で、プラグインが原因でgatsby buildでコケまくって修正に1週間近くかかったトラウマ)、今回はこの方法を採用してみます。カスタムもしやすいですしね。

クマ

「パーツ化」「パフォーマンス改善」「レスポンシブ対応」、全部やってみましょう!

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました!

プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし!

パーツ化、パフォーマンス改善、レスポンシブ対応

目標は「先程調べたIDを渡せば、パフォーマンスを考慮して、いい感じにレスポンシブ対応されたYoutube窓が設置される」です。

クマ

ぱっと聞いた感じ、サイコーですね

パーツ化とパフォーマンス改善

パーツ化とパフォーマンス改善は同時にやっていきます。

「なぜパフォーマンス改善なのか?」につきましては別記事で取り上げているのでそちらを参考にしてください。

クマ

まぁ、パフォーマンスを意識することが悪いわけはないですが。

簡単に説明すると、ページ読み込み時はYoutubeのサムネだけ読み込んで、サムネがクリックされたら実際のYoutubeを読み込む、という仕様になっています。

実際に私のブログで使っているコードをそのまま載せておきます。

クマ

もったいぶった言い方ですが、全然大したコードではないです。

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

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

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

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

export default EmbedYoutube

※4について、もらった動画IDからサムネを取得しているのですが、少し丁寧に説明します。

今回のコードでは「maxresdefault.jpg」を指定していますが、これは画像サイズ1280×720のサムネイルです。ここのjpgファイルの指定によって、以下のように画像のサイズが異なりますのでそれぞれの環境に合わせて指定してください。

  • default (120×90)
  • mqdefault(320×180)
  • hqdefault(480×360)
  • sddefault(640×480)
  • maxresdefault(1280×720)

ただ、Youtubeに上げてあるサムネのサイズによっては上手く表示されないこともあります。そのあたりは注意しながら指定しましょう。

レスポンシブ対応

CSSで対応します。

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

一番外側にあるクラス、.youtubewrapperにaspect-ratio: 16 / 9; を適応させてやるのがポイントです。これでYoutubeのアスペクト比と同じ16:9になるので、幅だけ変化させれば自動的に拡大、縮小していきます。ちなみに「あんまり大きくしてもなぁ」ということでmax-width: 800px;を指定していますが、この辺はお好みで。

あとは本体のiframe(クラス名.youtubeにしていますが)のwidhとheightを100%にすれば、.youtubewrapperに合わせたサイズになってくれます。

まとめ

GatsbyでのYoutube埋め込みについての説明をしました。

個人的にはiframeで対応するのがオススメです。が、それぞれの環境によってプラグインを使う、という手もあると思うので、そのあたりは各自判断していただければ、と思います。

Gatsbyを学習している方への私からのオススメ!

私が読んでよかったな、と思うGatsbyの学習をするのにオススメの本を紹介しておきます。

画も多くてとても読みやすく、ステップバイステップでGatsbyJSのサイトを作ることができます!

また、Gatsbyを学習する上で、Reactを同時に学習することもオススメします。

こちらも、まず構成や見た目がとても読みやすい本です。加えてReactに対しての専門的な知識を丁寧に学ぶことができます。ここでReactに対する基礎知識をしっかりしておくと、Gatsbyに対する見方が変わって、Webページをサクサク作ることができるようになります!

あと、色々と調べたのですが、Reactの学習ならUdemyもオススメです。必要な知識を1動画単位で購入できるので、学習に無駄がないです。Reactってあんまり学習できるプログラミングスクールみたいなのがないんですよね…。「React」と検索するだけで大量に動画がでてきます!

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次