gatsby_将视频嵌入您的Gatsby.js网站

gatsby

After blogging for more than a decade, I have realized that a blog post is kinda incomplete without some visual treat. The process of adding images is more or less the same. However, videos and GIFs are one level up which is rendered/embedded differently in various web applications, and the embedding process may vary from one framework to another.

写了十多年的博客后，我已经意识到，没有视觉效果的博客文章是不完整的。 添加图像的过程大致相同。 但是，视频和GIF只是一个层次，在各种Web应用程序中呈现/嵌入的方式有所不同，并且嵌入过程可能因一个框架而异。

JAMstack (JavaScript APIs Markup) is pretty much the hot topic, and that's why we've seen stupendous growth in Gatsby powered websites. Considering the growing popularity of JAMstack sites, I've decided to write about how you can embed videos in markdown with Gatsby.js.

JAMstack （JavaScript API标记）几乎是一个热门话题，这就是为什么我们在盖茨比支持的网站上看到了惊人的增长的原因。 考虑到JAMstack网站的日益普及，我决定撰写有关如何使用Gatsby.js将视频嵌入markdown的文章。

Coding in markdown brings so much ease and when I tried looking for ways to embed videos in Gatsby.js through markdown pages, I couldn't find a reasonable solution other than coding the functionality from the scratch.

标记降价编码带来了极大的便利，当我尝试通过标记降价页面寻找在Gatsby.js中嵌入视频的方法时，除了从头开始编写功能之外，我找不到合理的解决方案。

使用插件：gatsby-remark-embed-video ( Using Plugin: gatsby-remark-embed-video )

One big plus of using Gatsby is that you find a growing collection of plugins which implement Gatsby API through simple NPM packages. If you visit the Gatsby plugin library and type the keywords around embed videos, you'll find multiple results.

使用Gatsby的一大好处是，您会发现越来越多的插件可以通过简单的NPM软件包实现Gatsby API。 如果您访问Gatsby插件库并在嵌入视频周围输入关键字，则会发现多个结果。

Instead, I ask you to try some of these and find a suitable match I've decided to make your job easy. So, after trying a couple of awesome video embedding plugins I've managed to find the best solution for you. The plugin is called the gatsby-remark-embed-video, and it is one of the most intuitive plugins which you find in this particular niche. And I am so glad to tell that the plugin met my development needs to the fullest.

相反，我要求您尝试其中的一些方法，并找到合适的匹配项，我决定简化您的工作。 因此，在尝试了几个很棒的视频嵌入插件之后，我设法找到了最适合您的解决方案。 该插件称为gatsby-remark-embed-video ，它是在此特定gatsby-remark-embed-video市场中找到的最直观的插件之一。 我很高兴地告诉您，该插件完全满足了我的开发需求。

So, let's not waste time and jump straight away to the procedure of how this plugin works!

因此，让我们不要浪费时间直接进入此插件的工作过程！

步骤＃0：基本盖茨比设定 (Step #0: Basic Gatsby Setup)

The first step is that you must have a demo Gatsby site up and running. If you are an absolute beginner, I'd recommend you to begin with the gatsby-starter-blog theme. It showcases the most basic representation of a Gatsby site which is the perfect requirement for any beginner to get started.

第一步是您必须启动一个Gatsby演示站点并运行它。 如果您是绝对的初学者，建议您先使用gatsby-starter-blog 主题 。 它展示了盖茨比（Gatsby）网站的最基本代表，这是任何初学者入门的完美要求。

步骤＃1：安装gatsby-remark-embed-video (Step #1: gatsby-remark-embed-video Installation)

To install the plugin, type the following command in the root folder of your site and hit Enter.

要安装插件，请在您网站的根文件夹中键入以下命令，然后按Enter。

• For npm use:
  对于npm使用：

npm i gatsby-remark-embed-video

• For yarn use:
  对于yarn用途：

yarn add gatsby-remark-embed-video

I am going to install via npm so, I am uploading a GIF of this process.

我将通过npm安装，因此，我将上传此过程的GIF。

步骤2：工作 (Step #2: Working)

Next, add gatsby-remark-embed-video plugin to the gatsby-config.js file to make it work. In this file, you'll find all the site configuration options which are placed in the root folder.

接下来，将gatsby-remark-embed-video插件添加到gatsby-config.js文件中以使其工作。 在此文件中，您将找到放置在根文件夹中的所有站点配置选项。

One of these configuration options is for plugins. Here, you find a plugins array which implements Gatsby APIs. Like most of the Gatsby plugins, gatsby-remark-embed-video also supports advanced options which I am going to explain now.

这些配置选项之一是用于插件的。 在这里，您可以找到实现Gatsby API的插件数组。 像大多数Gatsby插件一样， gatsby-remark-embed-video也支持高级选项，我现在将对其进行解释。

module.exports = {
  siteMetadata: {
    title: 'Your Site Title',
    siteUrl: 'https://yoursite.com',
  },
    plugins: [     {
        resolve: "gatsby-remark-embed-video",
        options: {
            width: 800,
            ratio: 1.77, 
            height: 400, 
            related: false,
            noIframeBorder: true
        },
    },
    ],
}

• width: Defines the width of your video.
  width ：定义视频的宽度。
• ratio: (Optional) It is the all-famous 16:9 factor which when divided makes '1.77' as a default setting.
  ratio ：（可选）这是众所周知的16：9因子，当进行除法运算时会将默认值设置为“ 1.77”。
• height: (Optional) It is defined if you want to override the default ratio option explained above.
  height ：（可选）定义是否要覆盖上述默认比率选项。
• related: (Optional) If used, then it will remove all the related videos from the end of an embedded YouTube video.
  related ：（可选）如果使用，它将从嵌入式YouTube视频的末尾删除所有相关视频。
• noIframeBorder: (Optional) Sets the border style to 0.
  noIframeBorder ：（可选）将边框样式设置为0。

Moreover, the plugin is designed to embed videos in markdown which means it requires some pre-requisite plugins as well i.e.,

此外，该插件旨在将视频嵌入markdown中，这意味着它也需要一些必备插件，例如，

• gatsby-remark-responsive-iframe: Make iframes in markdown which is processed by remark responsive.
  gatsby-remark-responsive-iframe ：使markdown中的iframe由remark响应处理。
• gatsby-transformer-remark: Parses markdown files using remark.
  gatsby-transformer-remark ：使用remark解析markdown文件。
• gatsby-remark-images: Processes images in markdown so they can be used in the production build.
  gatsby-remark-images ：以markdown处理图像，以便可以在生产build使用它们。

All the aforementioned plugins will support gatsby-remark-embed-video to render videos in markdown. Also, there are some important conditions which you have to ensure while using this plugin, i.e.

所有上述插件将支持gatsby-remark-embed-video以markdown呈现视频。 另外，使用此插件时必须确保一些重要条件，即

If your site is using the gatsby-remark-responsive-iframe plugin, you have to ensure that the gatsby-remark-embed-video is defined first like this:

如果您的网站使用的是gatsby-remark-response-iframe插件，则必须确保首先定义gatsby-remark-embed-video，如下所示：

步骤＃3：插件使用 (Step #3: Plugin Usage)

The gatsby-remark-embed-video plugin is used to embed videos from multiple video streaming platforms like YouTube, Vimeo, Twitch, etc. In each case of these cases, you can embed the video by typing the following in your markdown file.

gatsby-remark-embed-video插件用于从多个视频流平台（例如YouTube ， Vimeo ， Twitch等）嵌入视频。在每种情况下，您都可以通过在markdown文件中键入以下内容来嵌入视频。

video: https://www.youtube.com/embed/2Xc9gXyf2G4 youtube: https://www.youtube.com/watch?v=2Xc9gXyf2G4 youtube: 2Xc9gXyf2G4

vimeo: https://vimeo.com/5299404 vimeo: 5299404

videoPress: https://videopress.com/v/kUJmAcSf 

videoPress: kUJmAcSf

twitch: https://player.twitch.tv/?channel=dakotaz twitch: https://player.twitch.tv/?autoplay=false&video=v273436948 twitch: 273436948 twitchLive: dakotaz

The above code snippet tells that the process is pretty simple. Either of these two formats can embed the videos:

上面的代码片段说明该过程非常简单。 这两种格式都可以嵌入视频：

1. Through complete web URLs
   通过完整的Web URL
2. Through video IDs
   通过视频ID

And each video source is prepended by the name of the video host i.e., YouTube, Vimeo, etc. For example, the video URL "https://www.youtube.com/watch?v=nG5TXyyaeDs" will be defined in the following two ways:

并且每个视频源都以视频主机的名称开头，例如YouTube，Vimeo等。例如，视频URL“ https://www.youtube.com/watch?v=nG5TXyyaeDs ”将在以下定义两种方式：

<!-- #1: Embed through web URL -->
`youtube:https://www.youtube.com/watch?v=nG5TXyyaeDs`

 <!-- #2: Embed through video ID -->
`youtube:nG5TXyyaeDs`

Note that in each case, the type of video host is quite evident, i.e. YouTube. So, by following this format, you can embed as many videos from multiple video hosts.

请注意，在每种情况下，视频主机的类型都很明显，例如YouTube。 因此，通过遵循这种格式，您可以嵌入来自多个视频主机的尽可能多的视频。

工作实例！ ( Working Example! )

Let's quickly jump on to a practical example where I am going to show you how to use this plugin. Like I have mentioned before I am using the gatsby-starter-blog theme for this article so, I'll be working in its gatsby-config.js file.

让我们快速转到一个实际示例，在该示例中，我将向您展示如何使用此插件。 就像我之前在本文中使用gatsby-starter-blog主题所提到的那样，我将在其gatsby-config.js文件中进行工作。

Here's the code where I've used the gatsby-remark-embed-video plugin.

这是我使用gatsby-remark-embed-video插件的代码。

plugins: [
{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            // Using gatsby-remark-embed-video before gatsby-remark-images & gatsby-remark-responsive-iframe plugins.             resolve: `gatsby-remark-embed-video`,             options: {
              maxWidth: 800,
              ratio: 1.77,
              height: 400,
              related: false,
              noIframerder: true,
            },
          },
          {
            resolve: `gatsby-remark-images`,             options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          ],
      },
},
]

See how I have used gatsby-remark-embed-video plugin before gatsby-remark-images & gatsby-remark-responsive-iframe plugins since it is the requirement.

请参阅我如何在使用gatsby-remark-embed-video gatsby-remark-images和gatsby-remark-responsive-iframe插件之前使用gatsby-remark-embed-video插件，因为这是gatsby-remark-responsive-iframe 。

Let's also see how to embed in a markdown file.

让我们还看看如何嵌入markdown文件中。

Save this file and preview the result on the front-end like this:

保存此文件，并像这样在前端预览结果：

结论 ( Conclusion )

Woot! Woot! Only three steps and embed as many videos as you want in your Gatsby sites. I even tried coding this functionality myself. But the easiest method of embedding video in a Gatsby site is to source it from sites like YouTube, Vimeo, or Twitch. It not only prevents you from writing lengthy code blocks but also saves time.

！ ！ 仅需三个步骤，即可在Gatsby网站中嵌入任意数量的视频。 我什至尝试自己编写此功能的代码。 但是，将视频嵌入Gatsby网站的最简单方法是从YouTube，Vimeo或Twitch等网站获取视频。 它不仅可以防止编写冗长的代码块，而且可以节省时间。

Like I mentioned at the start of this article that there are several other Gatsby plugins which work great with Markdown posts and pages. But I'd definitely recommend you trying out the gatsby-remark-embed-video plugin. Finally, don't forget to post your feedback in the comments section below.

就像我在本文开头提到的那样，还有其他几个Gatsby插件可以很好地与Markdown帖子和页面配合使用。 但我绝对建议您尝试使用gatsby-remark-embed-video插件。 最后，不要忘记在下面的评论部分中发表您的反馈。

翻译自: https://scotch.io/tutorials/embedding-videos-in-your-gatsbyjs-sites

gatsby