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

2020-05-07

はじめに

おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@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のブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。



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


Written by のふのふ

東京で働く名古屋生まれの麻雀と芝生と娘と妻を愛するアラフォーエンジニアです。 フロントエンドよりのweb開発技術(React,TypeScriptなど)を中心に扱っています。 web開発やデータサイエンス周りの技術に興味があります。 個人開発でwebアプリをリリースすることを目標にしています。

©2020 のふのふ All Rights Reserved.