GatsbyJSブログにYouTubeを埋め込んでみた

2020-05-07

Content

はじめに

おはようございます！こんにちは！こんばんは！
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です！！

今回はGatsbyJSブログの記事内にYouTubeを埋め込めるようにします。

基本的にはGatsbyJSの公式ページの内容通りやれば簡単にできます。
自分のYouTubeチャンネル（ないけど・・・そのうちポチりたい）の動画をブログに埋め込んだり、好きな動画やブログの参考にした動画などを埋め込んだりできるのでおススメです！

前提

このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。

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

以下コマンドで[gatsby-remark-embed-youtube]をインストールします。

npm install --save gatsby-remark-embed-youtube

プラグインの適用

インストールしたら[gatsby-config.js]にプラグインを追加します。

gatsby-config.js

module.exports = {
  plugins: [      
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {            resolve: "gatsby-remark-embed-youtube",            options: {              width: 800,              height: 400            }          },          {
            resolve: `gatsby-remark-responsive-iframe`,            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
        ]
      }
    },
  ]
}

注意点として、[gatsby-remark-responsive-iframe]を使っている場合はその前に必ず定義する必要があります。

記事に埋め込む

以下のようにマークダウンファイルに記載します。
[QNw6Q0VTkEQ]の部分は動画のURLの　https://www.youtube.com/watch?v=QNw6Q0VTkEQ　の一番後ろの部分の文字列の部分です。

Markdown

`youtube:https://www.youtube.com/embed/QNw6Q0VTkEQ`

このブログを始めるきっかけとなったマコなり社長の動画です。
10年前にこの動画に出会いたかった・・・

人生を変えるアクションプラン＝「ポチる」こと

思い切って何かに挑戦して、必死に努力してやり遂げて、また何かにポチってやり遂げる、この繰り返しだけが人生を変えていく。

この言葉が保守的なアラフォー子持ちサラリーマンの心にグサッと刺さりました。

なのでこのブログを必死にやり続けて、いろいろなものに挑戦して行きたいです！！

まとめ

今回はGatsbyJSブログの記事内にYouTubeを埋め込めるようにしました。
結構簡単に埋め込めるので今後多用するかもしれません。

また、YouTubeチャンネルとかも挑戦して（ポチって）、人生を変えていくループを作っていきたいです。
あと、マコなり社長のかなりの信者なので、おススメとかまとめとかしたいですね！！

他にもGatsbyJSのブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。

最後まで見ていただきありがとうございます！！

Content[Close]

はじめに

前提

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

プラグインの適用

記事に埋め込む

まとめ

Content