From 9a53be35a1a2f877a25f83441d8e6fcb65bc65cd Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Fri, 17 Jan 2020 05:43:20 +0900
Subject: [PATCH 01/13] translate working-with-video.md

---
 docs/docs/working-with-video.md | 83 +++++++++++++++++----------------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index b6697cc86..e3488ef97 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -1,27 +1,29 @@
 ---
-title: Working with Video
+title: 映像を使用する
 ---
 
-- [Sourcing video from a host](#sourcing-video-from-a-host)
-- [Embedding hosted videos in Markdown](#embedding-hosted-videos-in-markdown)
-- [Writing custom components for hosted video](#writing-custom-components-for-hosted-video)
-- [Querying video data from Markdown with GraphQL](#querying-video-data-from-markdown-with-graphql)
-- [Hosting your own HTML5 video files](#hosting-your-own-html5-video-files)
-- [Using custom video players](#using-custom-video-players)
+- [ホストから映像を取得する](#ホストから映像を取得する)
+- [ホストされた映像をマークダウンに埋め込む](#ホストされた映像をマークダウンに埋め込む)
+- [ホストされた映像をコンポーネントで表示する](#ホストされた映像をコンポーネントで表示する)
+- [GraphQL を使ってマークダウンから映像を要求する](#GraphQL-を使ってマークダウンから映像を要求する)
+- [独自の HTML5 映像ファイルをホスティングする](#独自の-HTML5-映像ファイルをホスティングする)
+- [カスタム映像プレイヤーを使う](#カスタム映像プレイヤーを使う)
 
-## Sourcing video from a host
+## ホストから映像を取得する
 
-The easiest method for including video on a Gatsby site is to source an uploaded file from a site like YouTube, Vimeo, or Twitch. Using the source URL from one of those hosts, you can use Remark plugins or create a custom `<iframe>` solution to embed videos into your Gatsby site.
+Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた映像を取得することです。
 
-## Embedding hosted videos in Markdown
+ホストされた映像の URL をもとに、Remark Plugins を使用するか、カスタム`<iframe>`を作成することで、Gatsby サイトに映像を埋め込むことができます。
 
-There are numerous Gatsby plugins for working with hosted video in your Markdown posts and pages. We recommend checking out the [gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video) plugin for sourcing from a variety of hosts like YouTube or vimeo.
+## ホストされた映像をマークダウンに埋め込む
 
-### Writing custom components for hosted video
+ホストされた映像をマークダウンの投稿やページから使用できるようにする Gatsby プラグインが多数あります。 YouTube や Vimeo などのさまざまなホストから取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインを確認することをお勧めします。
 
-If you would like more control over how YouTube (or similar) videos are embedded into your Gatsby posts and pages, you can write a reusable custom `iframe` component and include it in a JSX template or in your content [with MDX](/docs/mdx/).
+### ホストされた映像をコンポーネントで表示する
 
-In this reusable sample component, you could include props for video data like URL or title, any necessary markup for styling purposes, and the common `iframe` embed code:
+YouTube（または同様の）映像を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム`iframe`コンポーネントを作成し、JSX テンプレートまたは[MDX の中で](/docs/mdx/)使用します。
+
+次に示す再利用可能なサンプルコンポーネントには、URL やタイトルなどの映像データの props や、スタイル設定に必要なマークアップ、および一般的な`iframe`埋め込みコードが含まれています。
 
 ```jsx:title=src/components/video.js
 import React from "react"
@@ -41,7 +43,7 @@ const Video = ({ videoSrcURL, videoTitle, ...props }) => (
 export default Video
 ```
 
-You would then include this component in a template or page with a video source URL and title passed in as props. The data for video URLs and titles can be sourced in multiple ways, such as importing JSON or [querying data from Markdown with GraphQL](#querying-data-from-markdown-with-graphql). You can also hard-code video data for something fun, like a custom 404 page with an Easter egg YouTube video:
+次に、このコンポーネントを、映像の URL とタイトルの props と共にテンプレートまたはページへ加えます。URL およびタイトルなどの映像のデータは、JSON のインポートや[GraphQL を使ってマークダウンの中で映像を取得する](#GraphQL-を使ってマークダウンの中で映像を取得する)など、複数の方法で取得できます。また、404 ページでイースターエッグとして YouTube 映像を表示するなど、映像を何か面白いものに使用することもできます。
 
 ```jsx:title=src/pages/404.js
 import React from "react"
@@ -68,9 +70,9 @@ const NotFoundPage = () => (
 export default NotFoundPage
 ```
 
-## Querying video data from Markdown with GraphQL
+## GraphQL を使ってマークダウンから映像を要求する
 
-If a Markdown page or post has a featured video, you might want to include a video URL and title in [its frontmatter](/docs/adding-markdown-pages#note-on-creating-markdown-files). This allows you to pass those values into your custom component:
+マークダウンページまたは投稿が特定の映像を含む場合は、[その frontmatter]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に映像の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
 
 ```markdown:title=my-first-post.md
 ---
@@ -82,7 +84,7 @@ videoTitle: "Gatsby is Never Gonna Give You Up"
 ---
 ```
 
-To include a video component in a template, you could start with something like this:
+映像コンポーネントをテンプレートに加えるには、次のようなことから始めることができます。
 
 ```jsx:title=vlog-template.js
 import React from "react"
@@ -129,15 +131,15 @@ export const pageQuery = graphql`
 `
 ```
 
-## Hosting your own HTML5 video files
+## 独自の HTML5 映像ファイルをホスティングする
 
-It's super common to source video from YouTube, Twitch or Vimeo. But what if you want to host your own video and include it as HTML5 video?
+YouTube、Twitch または Vimeo から映像を取得することは非常に一般的な方法です。しかし、独自の映像をホストし、それを HTML5 に埋め込みたい場合はどうしたらいいでしょうか？
 
-To include your own video files that will work in multiple web browsers and platforms, you'll need to read up a bit on video extensions and codecs. We recommend MDN as a resource: [Media formats for HTML audio and video](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats). You may need video converter software to produce the necessary formats -- such as `.webm` and `.mp4` -- to support a range of devices and environments.
+独自の映像ファイルを複数の Web ブラウザーやプラットフォームで動作させるためには、映像拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML5 に音声や映像を埋め込むためのメディアフォーマット](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、映像変換ソフトが必要になる場合があります。
 
-HTML5 provides the `<video>` media element for working with videos. Inside the `<video>` element, you can provide multiple `<source>` elements that serve as different file formats the video player can use, with each browser electing to use a format it supports.
+HTML5 は、映像を使用するための `<video>`メディア要素を提供します。 `<video>`要素の中では、映像プレーヤーが使用できる異なるファイル形式を複数の `<source>`要素を使って提供できます。各ブラウザーは、その中からサポートしている形式の映像を使用します。
 
-If you have a video called `dog.mp4` in your site under `src/assets/dog.mp4`, you can [include that video in your page with webpack](/docs/importing-assets-into-files) like you would other assets. Then reference it in a `<source>` element, which is wrapped by a `<video>` element:
+もし、あなたのサイトの `src/assets/dog.mp4`に`dog.mp4`という映像がある場合、他のアセットを使用する時と同じように[webpack を使って映像をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>`要素にラップされた `<source>`要素で参照します。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js
@@ -152,11 +154,12 @@ export default () => (
 
 ```
 
-The `controls` attribute on the `<video>` will provide a default set of buttons overlaid on the video to play/pause, adjust volume, and go full screen. Other attributes like `muted` can set audio to silent, or `poster` can display an image when the video isn't playing. Common attributes that you'd want to apply to multiple videos could be extracted into a custom React video component. A full list of `<video>` attributes can be found on [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes).
+`<video>`要素の `controls`属性は、映像にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、`muted`属性なら、音声をミュートに設定できますし、`poster`属性では映像が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム映像コンポーネントで抽出できます。 `<video>`属性の完全な一覧は[MDN のドキュメント](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes)で見られます。
 
-### Supporting multiple browsers and formats
+### 複数のブラウザーとフォーマットのサポート
 
-Adding more source tags for additional formats will allow the browser to find a source type that it supports, if there are no matching source types the video will fail to load. You can see what formats are supported in different browsers on [MDN's docs about supported media formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility).
+ブラウザーがサポートしている形式を`<source>`要素で加えることにより、ブラウザーはその形式を見つけることができます。もしサポートしている形式の映像がなければ読み込みは失敗します。
+異なるブラウザーでどの形式がサポートされているのかは[サポートされてるメディアフォーマットについての MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility)で見ることできます。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js
@@ -173,24 +176,26 @@ export default () => (
 
 ```
 
+2 つの`<source>`要素がありますが 1 つの映像のみが表示されます。もしサポートされてれば`mp4`、次に`.ogg`が表示されます。
+
 Even though there are two `<source>` elements, only one video will be displayed, first `mp4` if it is supported, then `.ogg`.
 
-**Note**: This requires importing a video in the format of the type specified, i.e. adding a `<source>` element with `type=video/ogg` would also need a file import with a format of `.ogg`. Alternatively, you can specify a URL to where a video is remotely hosted as the `src` instead of importing a local file.
+**注意**: このとき、指定されたタイプの形式で映像をインポートする必要があります。つまり、 `type=video/ogg`で`<source>`要素を追加するには、`.ogg`の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、映像がリモートでホストされる場所の URL を`src`として指定できます。
 
-[See an example repository using `<video>` elements](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
+[`<video>`要素を使ったサンプルリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
 
-### Accessibility with custom video players
+### カスタム映像プレイヤーとアクセシビリティ
 
-One advantage of integrating a custom component with your own hosted video is it can give you more control over the video player, including its accessibility. Elements of accessible video and audio include:
+カスタムコンポーネントを独自にホストした映像と統合する利点の 1 つは、アクセシビリティなど、映像プレーヤーをより詳細に制御できることです。映像と音声の操作性を高める要素は次のとおりです。
 
-- captions: a text version of the audio, synchronized with the video
-- transcript (or subtitles): a text version of the audio and visual content, like captions but also including descriptions of key visual elements in the video
-- audio description: an audio version of visual information not conveyed in dialogue
-- accessible controls: buttons to operate the video that can be operated without a mouse, are labeled, and work across environments and browsers
+- キャプション：映像の音声のテキストバージョン
+- トランスクリプト（またはサブタイトル）：キャプションのような音声や視覚コンテンツのテキストバージョンですが、映像の重要な視覚要素の説明も含まれます
+- 音声解説：ダイアログでカバーされない視覚情報の音声バージョン
+- アクセシブルコントロール：マウスなしで操作できる映像を操作するためのボタン。ラベルが付けられてたり、環境やブラウザーを越えて機能する。
 
-Though captions, transcripts, and audio descriptions primarily aim to assist those with greater difficulty seeing or hearing, they benefit many other users who prefer reading to listening. Captions can also help people watching videos when they can't have the sound turned on for whatever reason.
+キャプション、トランスクリプト、および音声解説は、主に見ること、聞くことが困難な人を支援することを目的としていますが、聞くことよりも読むことを好む他の多くのユーザーにとって有益です。キャプションは、何らかの理由で音声を有効にできない時に映像を視聴したい人々にも役立ちます。
 
-HTML5 provides support for these types of assistive content through the `<track>` element. The track element is nested under a `<video`> element as an empty tag. An example usage of the `<track>` element with a video looks like this:
+HTML5 は、 `<track>`要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>`要素は、空のタグとして `<video>`要素の下にネストされます。ビデオでの `<track>`要素の使用例は次のようになります。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -207,8 +212,8 @@ export default () => (
 )
 ```
 
-The kind attribute can be of a variety of different types including `captions`, `subtitles`, and `descriptions`, among others. The `srcLang` defines English as the language used in the captions in the example, and the captions file imported is used as the source. You can read about the specific attributes of a [`<track>` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track).
+`kind`属性では、`captions`や、`subtitles`、`descriptions`などのさまざまなタイプを指定できます。 `srcLang`では、英語をキャプションで使用される言語として定義します。そして、インポートされたキャプションファイルがソースとして使用されます。`<track>`の詳しい属性については[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track)で読むことができます。
 
-**Note**: The filepath to import the captions in the above code snippet includes the `file-loader!` prefix, which helps webpack import the `.vtt` caption file.
+**注意**: 上記のコードスニペットのキャプションをインポートするファイルパスには、 `file-loader！`プレフィックスが含まれています。これは、webpack が`.vtt`キャプションファイルをインポートするのを助けます。
 
-Check out the accessible [HTML5 video player from PayPal](https://github.com/paypal/accessible-html5-video-player#react-version) for an example compatible with Gatsby and React.
+Gatsby と React を使用した例については、操作性の高い[PayPal の HTML5 映像プレイヤー](https://github.com/paypal/accessible-html5-video-player#react-version)をご覧ください。

From 1f8b158754d1db9efcd1ff2a044296970d3045ac Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Fri, 17 Jan 2020 05:52:16 +0900
Subject: [PATCH 02/13] unify expressions

---
 docs/docs/working-with-video.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index e3488ef97..8524e98e5 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -5,9 +5,9 @@ title: 映像を使用する
 - [ホストから映像を取得する](#ホストから映像を取得する)
 - [ホストされた映像をマークダウンに埋め込む](#ホストされた映像をマークダウンに埋め込む)
 - [ホストされた映像をコンポーネントで表示する](#ホストされた映像をコンポーネントで表示する)
-- [GraphQL を使ってマークダウンから映像を要求する](#GraphQL-を使ってマークダウンから映像を要求する)
+- [GraphQL を使用してマークダウンから映像を要求する](#GraphQL-を使用してマークダウンから映像を要求する)
 - [独自の HTML5 映像ファイルをホスティングする](#独自の-HTML5-映像ファイルをホスティングする)
-- [カスタム映像プレイヤーを使う](#カスタム映像プレイヤーを使う)
+- [カスタム映像プレイヤーを使用する](#カスタム映像プレイヤーを使用する)
 
 ## ホストから映像を取得する
 
@@ -43,7 +43,7 @@ const Video = ({ videoSrcURL, videoTitle, ...props }) => (
 export default Video
 ```
 
-次に、このコンポーネントを、映像の URL とタイトルの props と共にテンプレートまたはページへ加えます。URL およびタイトルなどの映像のデータは、JSON のインポートや[GraphQL を使ってマークダウンの中で映像を取得する](#GraphQL-を使ってマークダウンの中で映像を取得する)など、複数の方法で取得できます。また、404 ページでイースターエッグとして YouTube 映像を表示するなど、映像を何か面白いものに使用することもできます。
+次に、このコンポーネントを、映像の URL とタイトルの props と共にテンプレートまたはページへ加えます。URL およびタイトルなどの映像のデータは、JSON のインポートや[GraphQL を使用してマークダウンから映像を要求する](#GraphQL-を使用してマークダウンから映像を要求する)など、複数の方法で取得できます。また、404 ページでイースターエッグとして YouTube 映像を表示するなど、映像を何か面白いものに使用することもできます。
 
 ```jsx:title=src/pages/404.js
 import React from "react"
@@ -70,7 +70,7 @@ const NotFoundPage = () => (
 export default NotFoundPage
 ```
 
-## GraphQL を使ってマークダウンから映像を要求する
+## GraphQL を使用してマークダウンから映像を要求する
 
 マークダウンページまたは投稿が特定の映像を含む場合は、[その frontmatter]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に映像の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
 
@@ -137,9 +137,9 @@ YouTube、Twitch または Vimeo から映像を取得することは非常に
 
 独自の映像ファイルを複数の Web ブラウザーやプラットフォームで動作させるためには、映像拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML5 に音声や映像を埋め込むためのメディアフォーマット](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、映像変換ソフトが必要になる場合があります。
 
-HTML5 は、映像を使用するための `<video>`メディア要素を提供します。 `<video>`要素の中では、映像プレーヤーが使用できる異なるファイル形式を複数の `<source>`要素を使って提供できます。各ブラウザーは、その中からサポートしている形式の映像を使用します。
+HTML5 は、映像を使用するための `<video>`メディア要素を提供します。 `<video>`要素の中では、映像プレーヤーが使用できる異なるファイル形式を複数の `<source>`要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の映像を使用します。
 
-もし、あなたのサイトの `src/assets/dog.mp4`に`dog.mp4`という映像がある場合、他のアセットを使用する時と同じように[webpack を使って映像をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>`要素にラップされた `<source>`要素で参照します。
+もし、あなたのサイトの `src/assets/dog.mp4`に`dog.mp4`という映像がある場合、他のアセットを使用する時と同じように[webpack を使用して映像をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>`要素にラップされた `<source>`要素で参照します。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js

From 95b2ca30c56fd0d27714e0447c5e2d9f29934b2a Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Fri, 17 Jan 2020 06:16:17 +0900
Subject: [PATCH 03/13] update translation

---
 docs/docs/working-with-video.md | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 8524e98e5..4e74e4237 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -6,14 +6,12 @@ title: 映像を使用する
 - [ホストされた映像をマークダウンに埋め込む](#ホストされた映像をマークダウンに埋め込む)
 - [ホストされた映像をコンポーネントで表示する](#ホストされた映像をコンポーネントで表示する)
 - [GraphQL を使用してマークダウンから映像を要求する](#GraphQL-を使用してマークダウンから映像を要求する)
-- [独自の HTML5 映像ファイルをホスティングする](#独自の-HTML5-映像ファイルをホスティングする)
+- [独自の映像ファイルをホスティングする](#独自の映像ファイルをホスティングする)
 - [カスタム映像プレイヤーを使用する](#カスタム映像プレイヤーを使用する)
 
 ## ホストから映像を取得する
 
-Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた映像を取得することです。
-
-ホストされた映像の URL をもとに、Remark Plugins を使用するか、カスタム`<iframe>`を作成することで、Gatsby サイトに映像を埋め込むことができます。
+Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた映像を取得することです。ホストされた映像の URL をもとに、Remark のプラグインを使用するか、`<iframe>`を使用することで、Gatsby サイトに映像を埋め込むことができます。
 
 ## ホストされた映像をマークダウンに埋め込む
 
@@ -131,11 +129,11 @@ export const pageQuery = graphql`
 `
 ```
 
-## 独自の HTML5 映像ファイルをホスティングする
+## 独自の映像ファイルをホスティングする
 
 YouTube、Twitch または Vimeo から映像を取得することは非常に一般的な方法です。しかし、独自の映像をホストし、それを HTML5 に埋め込みたい場合はどうしたらいいでしょうか？
 
-独自の映像ファイルを複数の Web ブラウザーやプラットフォームで動作させるためには、映像拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML5 に音声や映像を埋め込むためのメディアフォーマット](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、映像変換ソフトが必要になる場合があります。
+独自の映像ファイルを複数の Web ブラウザーやプラットフォームで動作させるためには、映像拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML の音声と動画のメディア形式](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、映像変換ソフトが必要になる場合があります。
 
 HTML5 は、映像を使用するための `<video>`メディア要素を提供します。 `<video>`要素の中では、映像プレーヤーが使用できる異なるファイル形式を複数の `<source>`要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の映像を使用します。
 
@@ -154,12 +152,11 @@ export default () => (
 
 ```
 
-`<video>`要素の `controls`属性は、映像にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、`muted`属性なら、音声をミュートに設定できますし、`poster`属性では映像が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム映像コンポーネントで抽出できます。 `<video>`属性の完全な一覧は[MDN のドキュメント](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes)で見られます。
+`<video>`要素の `controls`属性は、映像にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、`muted`属性なら、音声をミュートに設定できますし、`poster`属性では映像が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム映像コンポーネントで抽出できます。 `<video>`属性の完全な一覧は[MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes)で見られます。
 
 ### 複数のブラウザーとフォーマットのサポート
 
-ブラウザーがサポートしている形式を`<source>`要素で加えることにより、ブラウザーはその形式を見つけることができます。もしサポートしている形式の映像がなければ読み込みは失敗します。
-異なるブラウザーでどの形式がサポートされているのかは[サポートされてるメディアフォーマットについての MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility)で見ることできます。
+ブラウザーがサポートしている形式を`<source>`要素で加えることにより、ブラウザーはその形式を見つけることができます。もしサポートしている形式の映像がなければ読み込みは失敗します。異なるブラウザーでどの形式がサポートされているのかは[ブラウザーの互換性](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility)で見ることできます。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js
@@ -176,7 +173,7 @@ export default () => (
 
 ```
 
-2 つの`<source>`要素がありますが 1 つの映像のみが表示されます。もしサポートされてれば`mp4`、次に`.ogg`が表示されます。
+2 つの`<source>`要素がありますが、この中から 1 つだけが使用されます。サポートされていれば`mp4`、`.ogg`の順で使用されます。
 
 Even though there are two `<source>` elements, only one video will be displayed, first `mp4` if it is supported, then `.ogg`.
 
@@ -184,9 +181,9 @@ Even though there are two `<source>` elements, only one video will be displayed,
 
 [`<video>`要素を使ったサンプルリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
 
-### カスタム映像プレイヤーとアクセシビリティ
+### カスタム映像プレイヤーのアクセシビリティ
 
-カスタムコンポーネントを独自にホストした映像と統合する利点の 1 つは、アクセシビリティなど、映像プレーヤーをより詳細に制御できることです。映像と音声の操作性を高める要素は次のとおりです。
+カスタムコンポーネントを独自にホストした映像と統合する利点の 1 つは、アクセシビリティの向上など、映像プレーヤーをより詳細に制御できることです。映像と音声の操作性を高める要素は次のとおりです。
 
 - キャプション：映像の音声のテキストバージョン
 - トランスクリプト（またはサブタイトル）：キャプションのような音声や視覚コンテンツのテキストバージョンですが、映像の重要な視覚要素の説明も含まれます
@@ -212,7 +209,7 @@ export default () => (
 )
 ```
 
-`kind`属性では、`captions`や、`subtitles`、`descriptions`などのさまざまなタイプを指定できます。 `srcLang`では、英語をキャプションで使用される言語として定義します。そして、インポートされたキャプションファイルがソースとして使用されます。`<track>`の詳しい属性については[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track)で読むことができます。
+`kind`属性では、`captions`や、`subtitles`、`descriptions`などのさまざまなタイプを指定できます。 `srcLang`で、この例では英語をキャプションで使用される言語として定義しています。そして、インポートされたキャプションファイルがソースとして使用されます。`<track>`要素の詳しい属性については[track についての MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)で読むことができます。
 
 **注意**: 上記のコードスニペットのキャプションをインポートするファイルパスには、 `file-loader！`プレフィックスが含まれています。これは、webpack が`.vtt`キャプションファイルをインポートするのを助けます。
 

From f4c395fd23c74deae47d3d4c3dcb2894192078b7 Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Fri, 17 Jan 2020 06:32:10 +0900
Subject: [PATCH 04/13] update working-with-video.md

---
 docs/docs/working-with-video.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 4e74e4237..54e8a817c 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -4,7 +4,7 @@ title: 映像を使用する
 
 - [ホストから映像を取得する](#ホストから映像を取得する)
 - [ホストされた映像をマークダウンに埋め込む](#ホストされた映像をマークダウンに埋め込む)
-- [ホストされた映像をコンポーネントで表示する](#ホストされた映像をコンポーネントで表示する)
+- [ホストされた映像のためのコンポーネントを作成する](#ホストされた映像のためのコンポーネントを作成する)
 - [GraphQL を使用してマークダウンから映像を要求する](#GraphQL-を使用してマークダウンから映像を要求する)
 - [独自の映像ファイルをホスティングする](#独自の映像ファイルをホスティングする)
 - [カスタム映像プレイヤーを使用する](#カスタム映像プレイヤーを使用する)
@@ -17,7 +17,7 @@ Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube
 
 ホストされた映像をマークダウンの投稿やページから使用できるようにする Gatsby プラグインが多数あります。 YouTube や Vimeo などのさまざまなホストから取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインを確認することをお勧めします。
 
-### ホストされた映像をコンポーネントで表示する
+### ホストされた映像のためのコンポーネントを作成する
 
 YouTube（または同様の）映像を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム`iframe`コンポーネントを作成し、JSX テンプレートまたは[MDX の中で](/docs/mdx/)使用します。
 
@@ -70,7 +70,7 @@ export default NotFoundPage
 
 ## GraphQL を使用してマークダウンから映像を要求する
 
-マークダウンページまたは投稿が特定の映像を含む場合は、[その frontmatter]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に映像の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
+マークダウンのページまたは投稿が特定の映像を含む場合は、[その frontmatter]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に映像の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
 
 ```markdown:title=my-first-post.md
 ---
@@ -131,13 +131,13 @@ export const pageQuery = graphql`
 
 ## 独自の映像ファイルをホスティングする
 
-YouTube、Twitch または Vimeo から映像を取得することは非常に一般的な方法です。しかし、独自の映像をホストし、それを HTML5 に埋め込みたい場合はどうしたらいいでしょうか？
+YouTube、Twitch または Vimeo から映像を取得することは非常に一般的な方法です。しかし、独自の映像を自らホストし、さらにそれを HTML5 に埋め込みたい場合はどうしたらいいでしょうか？
 
 独自の映像ファイルを複数の Web ブラウザーやプラットフォームで動作させるためには、映像拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML の音声と動画のメディア形式](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、映像変換ソフトが必要になる場合があります。
 
 HTML5 は、映像を使用するための `<video>`メディア要素を提供します。 `<video>`要素の中では、映像プレーヤーが使用できる異なるファイル形式を複数の `<source>`要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の映像を使用します。
 
-もし、あなたのサイトの `src/assets/dog.mp4`に`dog.mp4`という映像がある場合、他のアセットを使用する時と同じように[webpack を使用して映像をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>`要素にラップされた `<source>`要素で参照します。
+もし、あなたのサイトの `src/assets/dog.mp4`に`dog.mp4`という映像がある場合、他のアセットを使用する時と同様に[webpack を使用して映像をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>`要素にラップされた `<source>`要素で参照します。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js

From e37fac42fd1b4f88a84c12a0723261d26f35cd49 Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Fri, 17 Jan 2020 06:47:22 +0900
Subject: [PATCH 05/13] remove en

---
 docs/docs/working-with-video.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 54e8a817c..d0b4199a9 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -175,8 +175,6 @@ export default () => (
 
 2 つの`<source>`要素がありますが、この中から 1 つだけが使用されます。サポートされていれば`mp4`、`.ogg`の順で使用されます。
 
-Even though there are two `<source>` elements, only one video will be displayed, first `mp4` if it is supported, then `.ogg`.
-
 **注意**: このとき、指定されたタイプの形式で映像をインポートする必要があります。つまり、 `type=video/ogg`で`<source>`要素を追加するには、`.ogg`の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、映像がリモートでホストされる場所の URL を`src`として指定できます。
 
 [`<video>`要素を使ったサンプルリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)

From a5c3c9fc8eaedec157727c8fc30fa719ce8b4a73 Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Fri, 17 Jan 2020 08:48:12 +0900
Subject: [PATCH 06/13] translate code comment

---
 docs/docs/working-with-video.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index d0b4199a9..6277af8ef 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -52,14 +52,14 @@ import Video from "../components/video"
 
 const NotFoundPage = () => (
   <Layout>
-    <SEO title="404: Not found" />
+    <SEO title="404: 見つかりません" />
     <section>
-      <h1>NOT FOUND</h1>
-      <p>You just hit a page that doesn't exist... the sadness.</p>
-      <p>May I suggest a video instead?</p>
+      <h1>ページが見つかりません</h1>
+      <p>残念ですが...検索されたページは存在しません。</p>
+      <p>代わりに映像を提案してもいいですか？</p>
       <Video
         videoSrcURL="https://www.youtube.com/embed/dQw4w9WgXcQ"
-        videoTitle="Official Music Video on YouTube"
+        videoTitle="YouTubeの公式ミュージックビデオ"
       />
     </section>
   </Layout>
@@ -76,9 +76,9 @@ export default NotFoundPage
 ---
 path: "/blog/my-first-post"
 date: "2019-03-27"
-title: "My first blog post"
+title: "私の最初のブログ投稿"
 videoSourceURL: https://www.youtube.com/embed/dQw4w9WgXcQ
-videoTitle: "Gatsby is Never Gonna Give You Up"
+videoTitle: "Gatsbyは決してあなたをあきらめない"
 ---
 ```
 
@@ -91,9 +91,9 @@ import { graphql } from "gatsby"
 import Video from "../components/video"
 
 export default function VlogTemplate({
-  data, // this prop will be injected by the GraphQL query below.
+  data, // このpropは下のGraphQLのクエリーによって注入されます。
 }) {
-  const { markdownRemark } = data // data.markdownRemark holds your post data
+  const { markdownRemark } = data // data.markdownRemarkはあなたの投稿データを持っています
   const { frontmatter, html } = markdownRemark
   return (
     <div className="blog-post-container">

From a2f216ef5132821b7ae9d8fd8781b4403eb342aa Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Fri, 17 Jan 2020 08:49:14 +0900
Subject: [PATCH 07/13] fix

---
 docs/docs/working-with-video.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 6277af8ef..d9f71e2a2 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -54,7 +54,7 @@ const NotFoundPage = () => (
   <Layout>
     <SEO title="404: 見つかりません" />
     <section>
-      <h1>ページが見つかりません</h1>
+      <h1>見つかりません</h1>
       <p>残念ですが...検索されたページは存在しません。</p>
       <p>代わりに映像を提案してもいいですか？</p>
       <Video

From 0c977437a9629cddfab889f62e6ca18e13a4ffcb Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Fri, 17 Jan 2020 23:00:51 +0900
Subject: [PATCH 08/13] =?UTF-8?q?=E3=83=9E=E3=83=BC=E3=82=AF=E3=83=80?=
 =?UTF-8?q?=E3=82=A6=E3=83=B3=20to=20Markdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/working-with-video.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index d9f71e2a2..5a68977c9 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -3,9 +3,9 @@ title: 映像を使用する
 ---
 
 - [ホストから映像を取得する](#ホストから映像を取得する)
-- [ホストされた映像をマークダウンに埋め込む](#ホストされた映像をマークダウンに埋め込む)
+- [ホストされた映像を Markdown に埋め込む](#ホストされた映像を-Markdown-に埋め込む)
 - [ホストされた映像のためのコンポーネントを作成する](#ホストされた映像のためのコンポーネントを作成する)
-- [GraphQL を使用してマークダウンから映像を要求する](#GraphQL-を使用してマークダウンから映像を要求する)
+- [GraphQL を使用して Markdown から映像を要求する](#GraphQL-を使用して-Markdown-から映像を要求する)
 - [独自の映像ファイルをホスティングする](#独自の映像ファイルをホスティングする)
 - [カスタム映像プレイヤーを使用する](#カスタム映像プレイヤーを使用する)
 
@@ -13,9 +13,9 @@ title: 映像を使用する
 
 Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた映像を取得することです。ホストされた映像の URL をもとに、Remark のプラグインを使用するか、`<iframe>`を使用することで、Gatsby サイトに映像を埋め込むことができます。
 
-## ホストされた映像をマークダウンに埋め込む
+## ホストされた映像を Markdown に埋め込む
 
-ホストされた映像をマークダウンの投稿やページから使用できるようにする Gatsby プラグインが多数あります。 YouTube や Vimeo などのさまざまなホストから取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインを確認することをお勧めします。
+ホストされた映像を Markdown の投稿やページから使用できるようにする Gatsby プラグインが多数あります。 YouTube や Vimeo などのさまざまなホストから取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインを確認することをお勧めします。
 
 ### ホストされた映像のためのコンポーネントを作成する
 
@@ -41,7 +41,7 @@ const Video = ({ videoSrcURL, videoTitle, ...props }) => (
 export default Video
 ```
 
-次に、このコンポーネントを、映像の URL とタイトルの props と共にテンプレートまたはページへ加えます。URL およびタイトルなどの映像のデータは、JSON のインポートや[GraphQL を使用してマークダウンから映像を要求する](#GraphQL-を使用してマークダウンから映像を要求する)など、複数の方法で取得できます。また、404 ページでイースターエッグとして YouTube 映像を表示するなど、映像を何か面白いものに使用することもできます。
+次に、このコンポーネントを、映像の URL とタイトルの props と共にテンプレートまたはページへ加えます。URL およびタイトルなどの映像のデータは、JSON のインポートや[GraphQL を使用して Markdown から映像を要求する](#GraphQL-を使用してMarkdownから映像を要求する)など、複数の方法で取得できます。また、404 ページでイースターエッグとして YouTube 映像を表示するなど、映像を何か面白いものに使用することもできます。
 
 ```jsx:title=src/pages/404.js
 import React from "react"
@@ -68,9 +68,9 @@ const NotFoundPage = () => (
 export default NotFoundPage
 ```
 
-## GraphQL を使用してマークダウンから映像を要求する
+## GraphQL を使用して Markdown から映像を要求する
 
-マークダウンのページまたは投稿が特定の映像を含む場合は、[その frontmatter]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に映像の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
+Markdown のページまたは投稿が特定の映像を含む場合は、[その frontmatter]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に映像の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
 
 ```markdown:title=my-first-post.md
 ---

From c6ab1a82f442a68876bbac895e71ae2645c9c2ce Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Sat, 18 Jan 2020 16:08:18 +0900
Subject: [PATCH 09/13] add spaces

---
 docs/docs/working-with-video.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 5a68977c9..7f09b4d2c 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -11,7 +11,7 @@ title: 映像を使用する
 
 ## ホストから映像を取得する
 
-Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた映像を取得することです。ホストされた映像の URL をもとに、Remark のプラグインを使用するか、`<iframe>`を使用することで、Gatsby サイトに映像を埋め込むことができます。
+Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた映像を取得することです。ホストされた映像の URL をもとに、Remark のプラグインを使用するか、 `<iframe>` を使用することで、Gatsby サイトに映像を埋め込むことができます。
 
 ## ホストされた映像を Markdown に埋め込む
 
@@ -19,9 +19,9 @@ Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube
 
 ### ホストされた映像のためのコンポーネントを作成する
 
-YouTube（または同様の）映像を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム`iframe`コンポーネントを作成し、JSX テンプレートまたは[MDX の中で](/docs/mdx/)使用します。
+YouTube（または同様の）映像を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム `iframe` コンポーネントを作成し、JSX テンプレートまたは[MDX の中で](/docs/mdx/)使用します。
 
-次に示す再利用可能なサンプルコンポーネントには、URL やタイトルなどの映像データの props や、スタイル設定に必要なマークアップ、および一般的な`iframe`埋め込みコードが含まれています。
+次に示す再利用可能なサンプルコンポーネントには、URL やタイトルなどの映像データの props や、スタイル設定に必要なマークアップ、および一般的な `iframe` 埋め込みコードが含まれています。
 
 ```jsx:title=src/components/video.js
 import React from "react"
@@ -135,9 +135,9 @@ YouTube、Twitch または Vimeo から映像を取得することは非常に
 
 独自の映像ファイルを複数の Web ブラウザーやプラットフォームで動作させるためには、映像拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML の音声と動画のメディア形式](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、映像変換ソフトが必要になる場合があります。
 
-HTML5 は、映像を使用するための `<video>`メディア要素を提供します。 `<video>`要素の中では、映像プレーヤーが使用できる異なるファイル形式を複数の `<source>`要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の映像を使用します。
+HTML5 は、映像を使用するための `<video>` メディア要素を提供します。 `<video>` 要素の中では、映像プレーヤーが使用できる異なるファイル形式を複数の `<source>` 要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の映像を使用します。
 
-もし、あなたのサイトの `src/assets/dog.mp4`に`dog.mp4`という映像がある場合、他のアセットを使用する時と同様に[webpack を使用して映像をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>`要素にラップされた `<source>`要素で参照します。
+もし、あなたのサイトの `src/assets/dog.mp4` に `dog.mp4` という映像がある場合、他のアセットを使用する時と同様に[webpack を使用して映像をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>` 要素にラップされた `<source>` 要素で参照します。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js
@@ -152,11 +152,11 @@ export default () => (
 
 ```
 
-`<video>`要素の `controls`属性は、映像にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、`muted`属性なら、音声をミュートに設定できますし、`poster`属性では映像が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム映像コンポーネントで抽出できます。 `<video>`属性の完全な一覧は[MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes)で見られます。
+`<video>` 要素の `controls` 属性は、映像にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、 `muted` 属性なら、音声をミュートに設定できますし、 `poster` 属性では映像が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム映像コンポーネントで抽出できます。 `<video>` 属性の完全な一覧は[MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes)で見られます。
 
 ### 複数のブラウザーとフォーマットのサポート
 
-ブラウザーがサポートしている形式を`<source>`要素で加えることにより、ブラウザーはその形式を見つけることができます。もしサポートしている形式の映像がなければ読み込みは失敗します。異なるブラウザーでどの形式がサポートされているのかは[ブラウザーの互換性](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility)で見ることできます。
+ブラウザーがサポートしている形式を `<source>` 要素で加えることにより、ブラウザーはその形式を見つけることができます。もしサポートしている形式の映像がなければ読み込みは失敗します。異なるブラウザーでどの形式がサポートされているのかは[ブラウザーの互換性](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility)で見ることできます。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js
@@ -173,11 +173,11 @@ export default () => (
 
 ```
 
-2 つの`<source>`要素がありますが、この中から 1 つだけが使用されます。サポートされていれば`mp4`、`.ogg`の順で使用されます。
+2 つの `<source>` 要素がありますが、この中から 1 つだけが使用されます。サポートされていれば `mp4` 、 `.ogg` の順で使用されます。
 
-**注意**: このとき、指定されたタイプの形式で映像をインポートする必要があります。つまり、 `type=video/ogg`で`<source>`要素を追加するには、`.ogg`の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、映像がリモートでホストされる場所の URL を`src`として指定できます。
+**注意**: このとき、指定されたタイプの形式で映像をインポートする必要があります。つまり、 `type=video/ogg` で `<source>` 要素を追加するには、 `.ogg` の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、映像がリモートでホストされる場所の URL を `src` として指定できます。
 
-[`<video>`要素を使ったサンプルリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
+[ `<video>` 要素を使ったサンプルリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
 
 ### カスタム映像プレイヤーのアクセシビリティ
 
@@ -190,7 +190,7 @@ export default () => (
 
 キャプション、トランスクリプト、および音声解説は、主に見ること、聞くことが困難な人を支援することを目的としていますが、聞くことよりも読むことを好む他の多くのユーザーにとって有益です。キャプションは、何らかの理由で音声を有効にできない時に映像を視聴したい人々にも役立ちます。
 
-HTML5 は、 `<track>`要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>`要素は、空のタグとして `<video>`要素の下にネストされます。ビデオでの `<track>`要素の使用例は次のようになります。
+HTML5 は、 `<track>` 要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>` 要素は、空のタグとして `<video>` 要素の下にネストされます。ビデオでの `<track>` 要素の使用例は次のようになります。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -207,8 +207,8 @@ export default () => (
 )
 ```
 
-`kind`属性では、`captions`や、`subtitles`、`descriptions`などのさまざまなタイプを指定できます。 `srcLang`で、この例では英語をキャプションで使用される言語として定義しています。そして、インポートされたキャプションファイルがソースとして使用されます。`<track>`要素の詳しい属性については[track についての MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)で読むことができます。
+`kind` 属性では、 `captions` や、 `subtitles` 、 `descriptions` などのさまざまなタイプを指定できます。 `srcLang` で、この例では英語をキャプションで使用される言語として定義しています。そして、インポートされたキャプションファイルがソースとして使用されます。 `<track>` 要素の詳しい属性については[track についての MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)で読むことができます。
 
-**注意**: 上記のコードスニペットのキャプションをインポートするファイルパスには、 `file-loader！`プレフィックスが含まれています。これは、webpack が`.vtt`キャプションファイルをインポートするのを助けます。
+**注意**: 上記のコードスニペットのキャプションをインポートするファイルパスには、 `file-loader！` プレフィックスが含まれています。これは、webpack が `.vtt` キャプションファイルをインポートするのを助けます。
 
 Gatsby と React を使用した例については、操作性の高い[PayPal の HTML5 映像プレイヤー](https://github.com/paypal/accessible-html5-video-player#react-version)をご覧ください。

From 1da1480ac0f57c1026dd9365fa914c02cd5079ee Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Sat, 18 Jan 2020 17:05:34 +0900
Subject: [PATCH 10/13] update translate

---
 docs/docs/working-with-video.md | 86 ++++++++++++++++-----------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 7f09b4d2c..4854ba77e 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -1,27 +1,27 @@
 ---
-title: 映像を使用する
+title: 動画を使用する
 ---
 
-- [ホストから映像を取得する](#ホストから映像を取得する)
-- [ホストされた映像を Markdown に埋め込む](#ホストされた映像を-Markdown-に埋め込む)
-- [ホストされた映像のためのコンポーネントを作成する](#ホストされた映像のためのコンポーネントを作成する)
-- [GraphQL を使用して Markdown から映像を要求する](#GraphQL-を使用して-Markdown-から映像を要求する)
-- [独自の映像ファイルをホスティングする](#独自の映像ファイルをホスティングする)
-- [カスタム映像プレイヤーを使用する](#カスタム映像プレイヤーを使用する)
+- [ホストから動画を取得する](#ホストから動画を取得する)
+- [ホストされた動画を Markdown に埋め込む](#ホストされた動画を-Markdown-に埋め込む)
+- [ホストされた動画のためのカスタムコンポーネントを作成する](#ホストされた動画のためのカスタムコンポーネントを作成する)
+- [GraphQL を使用して Markdown から動画を要求する](#GraphQL-を使用して-Markdown-から動画を要求する)
+- [独自の HTML5 の動画ファイルをホスティングする](#独自の-HTML5-の動画ファイルをホスティングする)
+- [カスタム動画プレイヤーを使用する](#カスタム動画プレイヤーを使用する)
 
-## ホストから映像を取得する
+## ホストから動画を取得する
 
-Gatsby サイトに映像を埋め込むもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた映像を取得することです。ホストされた映像の URL をもとに、Remark のプラグインを使用するか、 `<iframe>` を使用することで、Gatsby サイトに映像を埋め込むことができます。
+Gatsby サイトに動画を含めるもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた動画を取得することです。ホストされた動画の URL を使って、Remark のプラグインを使用するか、カスタム `<iframe>` の解決策を作成することで、Gatsby サイトに動画を埋め込むことができます。
 
-## ホストされた映像を Markdown に埋め込む
+## ホストされた動画を Markdown に埋め込む
 
-ホストされた映像を Markdown の投稿やページから使用できるようにする Gatsby プラグインが多数あります。 YouTube や Vimeo などのさまざまなホストから取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインを確認することをお勧めします。
+ホストされた動画を Markdown の投稿やページから使用できるようにする多くの Gatsby プラグインがあります。 YouTube や Vimeo などのさまざまなホストから取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインを確認することをお勧めします。
 
-### ホストされた映像のためのコンポーネントを作成する
+### ホストされた動画のためのカスタムコンポーネントを作成する
 
-YouTube（または同様の）映像を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム `iframe` コンポーネントを作成し、JSX テンプレートまたは[MDX の中で](/docs/mdx/)使用します。
+YouTube（または同様の）動画を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム `iframe` コンポーネントを作成し、JSX テンプレートや[MDX の中](/docs/mdx/)の内容に含めます。
 
-次に示す再利用可能なサンプルコンポーネントには、URL やタイトルなどの映像データの props や、スタイル設定に必要なマークアップ、および一般的な `iframe` 埋め込みコードが含まれています。
+次の再利用可能なサンプルコンポーネントには、URL やタイトルなどの動画データのための props や、スタイル設定に必要なマークアップ、そして一般的な `iframe` 埋め込みコードが含まれています。
 
 ```jsx:title=src/components/video.js
 import React from "react"
@@ -41,7 +41,7 @@ const Video = ({ videoSrcURL, videoTitle, ...props }) => (
 export default Video
 ```
 
-次に、このコンポーネントを、映像の URL とタイトルの props と共にテンプレートまたはページへ加えます。URL およびタイトルなどの映像のデータは、JSON のインポートや[GraphQL を使用して Markdown から映像を要求する](#GraphQL-を使用してMarkdownから映像を要求する)など、複数の方法で取得できます。また、404 ページでイースターエッグとして YouTube 映像を表示するなど、映像を何か面白いものに使用することもできます。
+次に、このコンポーネントを、動画の URL とタイトルの props と共にテンプレートやページに含めます。URL およびタイトルなどの動画のデータは、JSON のインポートや[GraphQL を使用して Markdown から動画を要求する](#GraphQL-を使用してMarkdownから動画を要求する)など、複数の方法で取得できます。また、404 ページの中にイースターエッグとして YouTube 動画を表示するなど、動画を何か面白いもののためにハードコードすることもできます。
 
 ```jsx:title=src/pages/404.js
 import React from "react"
@@ -55,8 +55,8 @@ const NotFoundPage = () => (
     <SEO title="404: 見つかりません" />
     <section>
       <h1>見つかりません</h1>
-      <p>残念ですが...検索されたページは存在しません。</p>
-      <p>代わりに映像を提案してもいいですか？</p>
+      <p>検索されたページは存在しません...悲しい</p>
+      <p>代わりに動画を提案してもいいですか？</p>
       <Video
         videoSrcURL="https://www.youtube.com/embed/dQw4w9WgXcQ"
         videoTitle="YouTubeの公式ミュージックビデオ"
@@ -68,9 +68,9 @@ const NotFoundPage = () => (
 export default NotFoundPage
 ```
 
-## GraphQL を使用して Markdown から映像を要求する
+## GraphQL を使用して Markdown から動画を要求する
 
-Markdown のページまたは投稿が特定の映像を含む場合は、[その frontmatter]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に映像の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
+もし Markdown のページまたは投稿が特定の動画を含む場合は、[その序文]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に動画の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
 
 ```markdown:title=my-first-post.md
 ---
@@ -82,7 +82,7 @@ videoTitle: "Gatsbyは決してあなたをあきらめない"
 ---
 ```
 
-映像コンポーネントをテンプレートに加えるには、次のようなことから始めることができます。
+動画コンポーネントをテンプレートに含めるには、次のようなことから始めることができます。
 
 ```jsx:title=vlog-template.js
 import React from "react"
@@ -91,7 +91,7 @@ import { graphql } from "gatsby"
 import Video from "../components/video"
 
 export default function VlogTemplate({
-  data, // このpropは下のGraphQLのクエリーによって注入されます。
+  data, // このpropは下のGraphQLのQueryによって注入されます。
 }) {
   const { markdownRemark } = data // data.markdownRemarkはあなたの投稿データを持っています
   const { frontmatter, html } = markdownRemark
@@ -129,15 +129,15 @@ export const pageQuery = graphql`
 `
 ```
 
-## 独自の映像ファイルをホスティングする
+## 独自の HTML5 の動画ファイルをホスティングする
 
-YouTube、Twitch または Vimeo から映像を取得することは非常に一般的な方法です。しかし、独自の映像を自らホストし、さらにそれを HTML5 に埋め込みたい場合はどうしたらいいでしょうか？
+YouTube、Twitch または Vimeo から動画を取得することは非常に一般的な方法です。しかし、もし独自の動画をホストし、さらにそれを HTML5 として含めたい場合はどうしたらいいでしょうか？
 
-独自の映像ファイルを複数の Web ブラウザーやプラットフォームで動作させるためには、映像拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML の音声と動画のメディア形式](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、映像変換ソフトが必要になる場合があります。
+独自の動画ファイルを複数の Web ブラウザーやプラットフォームに含めるためには、動画拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML の音声と動画のメディア形式](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、動画変換ソフトが必要になる場合があります。
 
-HTML5 は、映像を使用するための `<video>` メディア要素を提供します。 `<video>` 要素の中では、映像プレーヤーが使用できる異なるファイル形式を複数の `<source>` 要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の映像を使用します。
+HTML5 は、動画を使用するための `<video>` メディア要素を提供します。 `<video>` 要素の中では、動画プレーヤーが使用できる異なるファイル形式を複数の `<source>` 要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の動画を使用します。
 
-もし、あなたのサイトの `src/assets/dog.mp4` に `dog.mp4` という映像がある場合、他のアセットを使用する時と同様に[webpack を使用して映像をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>` 要素にラップされた `<source>` 要素で参照します。
+もし、あなたのサイトの `src/assets/dog.mp4` に `dog.mp4` という動画がある場合、他のアセットを使用する時と同様に[webpack を使用して動画をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>` 要素にラップされた `<source>` 要素で参照します。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js
@@ -152,11 +152,11 @@ export default () => (
 
 ```
 
-`<video>` 要素の `controls` 属性は、映像にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、 `muted` 属性なら、音声をミュートに設定できますし、 `poster` 属性では映像が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム映像コンポーネントで抽出できます。 `<video>` 属性の完全な一覧は[MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes)で見られます。
+`<video>` 要素の `controls` 属性は、動画にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、 `muted` 属性なら、音声をミュートに設定できますし、 `poster` 属性では動画が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム動画コンポーネントで抽出できます。 `<video>` 属性の完全な一覧は[MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes)で見られます。
 
-### 複数のブラウザーとフォーマットのサポート
+### 複数のブラウザーと形式のサポート
 
-ブラウザーがサポートしている形式を `<source>` 要素で加えることにより、ブラウザーはその形式を見つけることができます。もしサポートしている形式の映像がなければ読み込みは失敗します。異なるブラウザーでどの形式がサポートされているのかは[ブラウザーの互換性](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility)で見ることできます。
+もし形式が合わず読み込みに失敗した場合、形式を加えるために source タグを加えることでブラウザーはサポートしている source の type を見つけることができます。異なるブラウザーにどの形式がサポートされているのかは[ブラウザーの互換性](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility)で見ることできます。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js
@@ -173,24 +173,24 @@ export default () => (
 
 ```
 
-2 つの `<source>` 要素がありますが、この中から 1 つだけが使用されます。サポートされていれば `mp4` 、 `.ogg` の順で使用されます。
+2 つの `<source>` 要素がありますが、この中から 1 つだけが使用されます。サポートされていれば `mp4` 、 次に`.ogg`。
 
-**注意**: このとき、指定されたタイプの形式で映像をインポートする必要があります。つまり、 `type=video/ogg` で `<source>` 要素を追加するには、 `.ogg` の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、映像がリモートでホストされる場所の URL を `src` として指定できます。
+**注意**: このとき、指定されたタイプの形式で動画をインポートする必要があります。つまり、 `type=video/ogg` を持つ `<source>` 要素を追加するには、 `.ogg` の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、動画がリモートでホストされる場所の URL を `src` として指定できます。
 
-[ `<video>` 要素を使ったサンプルリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
+[ `<video>` 要素を使った例のリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
 
-### カスタム映像プレイヤーのアクセシビリティ
+### カスタム動画プレイヤーに伴うアクセシビリティ
 
-カスタムコンポーネントを独自にホストした映像と統合する利点の 1 つは、アクセシビリティの向上など、映像プレーヤーをより詳細に制御できることです。映像と音声の操作性を高める要素は次のとおりです。
+カスタムコンポーネントを独自にホストした動画と統合する利点の 1 つは、アクセシビリティを含め、動画プレーヤーをより詳細に制御できることです。アクセシビリティに関する動画と音声の要素は次のとおりです。
 
-- キャプション：映像の音声のテキストバージョン
-- トランスクリプト（またはサブタイトル）：キャプションのような音声や視覚コンテンツのテキストバージョンですが、映像の重要な視覚要素の説明も含まれます
-- 音声解説：ダイアログでカバーされない視覚情報の音声バージョン
-- アクセシブルコントロール：マウスなしで操作できる映像を操作するためのボタン。ラベルが付けられてたり、環境やブラウザーを越えて機能する。
+- 字幕：動画の音声のテキストバージョン
+- 写し（または副題）：動画の重要な視覚要素の説明も含めた字幕のような音声や視覚コンテンツのテキストバージョン
+- 音声解説：対話で補えない視覚情報の音声バージョン
+- アクセシブルコントロール：ラベルが付けられてたり、環境やブラウザーを越えて機能する、マウスなしで操作できる動画を操作するためのボタン
 
-キャプション、トランスクリプト、および音声解説は、主に見ること、聞くことが困難な人を支援することを目的としていますが、聞くことよりも読むことを好む他の多くのユーザーにとって有益です。キャプションは、何らかの理由で音声を有効にできない時に映像を視聴したい人々にも役立ちます。
+字幕、写し、および音声解説は、主に見ること、聞くことが困難な人を支援することを目的としていますが、聞くことよりも読むことを好む他の多くのユーザーにとって有益です。字幕は、何らかの理由で音声を有効にできない時に動画を視聴したい人々にも役立ちます。
 
-HTML5 は、 `<track>` 要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>` 要素は、空のタグとして `<video>` 要素の下にネストされます。ビデオでの `<track>` 要素の使用例は次のようになります。
+HTML5 は、 `<track>` 要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>` 要素は、空のタグとして `<video>` 要素の入れ子にします。動画での `<track>` 要素の使用例は次のようになります。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -207,8 +207,8 @@ export default () => (
 )
 ```
 
-`kind` 属性では、 `captions` や、 `subtitles` 、 `descriptions` などのさまざまなタイプを指定できます。 `srcLang` で、この例では英語をキャプションで使用される言語として定義しています。そして、インポートされたキャプションファイルがソースとして使用されます。 `<track>` 要素の詳しい属性については[track についての MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)で読むことができます。
+kind 属性では、 `captions` や、 `subtitles` 、 `descriptions` などのさまざまなタイプを指定できます。 `srcLang` で、この例では英語を字幕で使用される言語として定義しています。そして、インポートされた字幕ファイルがソースとして使用されます。 `<track>` 要素の詳しい属性については[track についての MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)で読むことができます。
 
-**注意**: 上記のコードスニペットのキャプションをインポートするファイルパスには、 `file-loader！` プレフィックスが含まれています。これは、webpack が `.vtt` キャプションファイルをインポートするのを助けます。
+**注意**: 上記のコードスニペットの字幕をインポートするファイルパスには、 `file-loader！` プレフィックスが含まれています。これは、webpack が `.vtt` 字幕ファイルをインポートするのを助けます。
 
-Gatsby と React を使用した例については、操作性の高い[PayPal の HTML5 映像プレイヤー](https://github.com/paypal/accessible-html5-video-player#react-version)をご覧ください。
+Gatsby と React を使用した例については、アクセシビリティを伴う[PayPal の HTML5 動画プレイヤー](https://github.com/paypal/accessible-html5-video-player#react-version)をご覧ください。

From a2fe4532eaa2b59328e7b6e6189920131e5a7260 Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Thu, 30 Jan 2020 06:52:10 +0900
Subject: [PATCH 11/13] respond to review

---
 docs/docs/working-with-video.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 4854ba77e..0a1f10b6b 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -15,7 +15,7 @@ Gatsby サイトに動画を含めるもっとも簡単な方法は、YouTube 
 
 ## ホストされた動画を Markdown に埋め込む
 
-ホストされた動画を Markdown の投稿やページから使用できるようにする多くの Gatsby プラグインがあります。 YouTube や Vimeo などのさまざまなホストから取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインを確認することをお勧めします。
+ホストされた動画を Markdown 投稿やページから使用できるようにする、多くの Gatsby プラグインがあります。 YouTube や Vimeo などのさまざまなホストから動画を取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインをお勧めします。
 
 ### ホストされた動画のためのカスタムコンポーネントを作成する
 
@@ -70,7 +70,7 @@ export default NotFoundPage
 
 ## GraphQL を使用して Markdown から動画を要求する
 
-もし Markdown のページまたは投稿が特定の動画を含む場合は、[その序文]（/docs/adding-markdown-pages＃note-on-creating-markdown-files）に動画の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
+もし Markdown のページまたは投稿が特定の動画を含む場合は、[その序文](/docs/adding-markdown-pages＃note-on-creating-markdown-files)に動画の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。
 
 ```markdown:title=my-first-post.md
 ---
@@ -91,9 +91,9 @@ import { graphql } from "gatsby"
 import Video from "../components/video"
 
 export default function VlogTemplate({
-  data, // このpropは下のGraphQLのQueryによって注入されます。
+  data, // この prop は下の GraphQL の Query によって注入されます。
 }) {
-  const { markdownRemark } = data // data.markdownRemarkはあなたの投稿データを持っています
+  const { markdownRemark } = data // data.markdownRemark はあなたの投稿データを持っています
   const { frontmatter, html } = markdownRemark
   return (
     <div className="blog-post-container">
@@ -173,7 +173,7 @@ export default () => (
 
 ```
 
-2 つの `<source>` 要素がありますが、この中から 1 つだけが使用されます。サポートされていれば `mp4` 、 次に`.ogg`。
+2 つの `<source>` 要素がありますが、この中から 1 つだけが使用されます。サポートされていれば `mp4` 、 次に `.ogg` 。
 
 **注意**: このとき、指定されたタイプの形式で動画をインポートする必要があります。つまり、 `type=video/ogg` を持つ `<source>` 要素を追加するには、 `.ogg` の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、動画がリモートでホストされる場所の URL を `src` として指定できます。
 
@@ -184,11 +184,11 @@ export default () => (
 カスタムコンポーネントを独自にホストした動画と統合する利点の 1 つは、アクセシビリティを含め、動画プレーヤーをより詳細に制御できることです。アクセシビリティに関する動画と音声の要素は次のとおりです。
 
 - 字幕：動画の音声のテキストバージョン
-- 写し（または副題）：動画の重要な視覚要素の説明も含めた字幕のような音声や視覚コンテンツのテキストバージョン
+- 文字起こし（または字幕）：動画の重要な視覚要素の説明も含めた字幕のような音声や視覚コンテンツのテキストバージョン
 - 音声解説：対話で補えない視覚情報の音声バージョン
 - アクセシブルコントロール：ラベルが付けられてたり、環境やブラウザーを越えて機能する、マウスなしで操作できる動画を操作するためのボタン
 
-字幕、写し、および音声解説は、主に見ること、聞くことが困難な人を支援することを目的としていますが、聞くことよりも読むことを好む他の多くのユーザーにとって有益です。字幕は、何らかの理由で音声を有効にできない時に動画を視聴したい人々にも役立ちます。
+字幕、文字起こし、および音声解説は、主に見ること、聞くことが困難な人を支援することを目的としていますが、聞くことよりも読むことを好む他の多くのユーザーにとって有益です。字幕は、何らかの理由で音声を有効にできない時に動画を視聴したい人々にも役立ちます。
 
 HTML5 は、 `<track>` 要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>` 要素は、空のタグとして `<video>` 要素の入れ子にします。動画での `<track>` 要素の使用例は次のようになります。
 

From 155d66421bff0d3a8044f78c845461cd4413de79 Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Thu, 30 Jan 2020 06:54:52 +0900
Subject: [PATCH 12/13] remove space

---
 docs/docs/working-with-video.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 0a1f10b6b..9b94f0bff 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -177,7 +177,7 @@ export default () => (
 
 **注意**: このとき、指定されたタイプの形式で動画をインポートする必要があります。つまり、 `type=video/ogg` を持つ `<source>` 要素を追加するには、 `.ogg` の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、動画がリモートでホストされる場所の URL を `src` として指定できます。
 
-[ `<video>` 要素を使った例のリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
+[`<video>` 要素を使った例のリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
 
 ### カスタム動画プレイヤーに伴うアクセシビリティ
 

From dc193bc88a817fadb3242a5c1d57df1df08c4f58 Mon Sep 17 00:00:00 2001
From: ShiratoriTenta <tenta1111swan@gmail.com>
Date: Sat, 1 Feb 2020 15:21:54 +0900
Subject: [PATCH 13/13] respond to review

---
 docs/docs/working-with-video.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md
index 9b94f0bff..f81877395 100644
--- a/docs/docs/working-with-video.md
+++ b/docs/docs/working-with-video.md
@@ -11,15 +11,15 @@ title: 動画を使用する
 
 ## ホストから動画を取得する
 
-Gatsby サイトに動画を含めるもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた動画を取得することです。ホストされた動画の URL を使って、Remark のプラグインを使用するか、カスタム `<iframe>` の解決策を作成することで、Gatsby サイトに動画を埋め込むことができます。
+Gatsby サイトに動画を含めるもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた動画を取得することです。ホストされた動画の URL を使って、Remark のプラグインを使用するか、カスタムされた `<iframe>` を作成することで、Gatsby サイトに動画を埋め込むことができます。
 
 ## ホストされた動画を Markdown に埋め込む
 
-ホストされた動画を Markdown 投稿やページから使用できるようにする、多くの Gatsby プラグインがあります。 YouTube や Vimeo などのさまざまなホストから動画を取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video)プラグインをお勧めします。
+Gatsby にはホストされた動画を Markdown 投稿やページから使用できるようにする、多くのプラグインが用意されています。 YouTube や Vimeo などのさまざまなホストから動画を取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video) プラグインをお勧めします。
 
 ### ホストされた動画のためのカスタムコンポーネントを作成する
 
-YouTube（または同様の）動画を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム `iframe` コンポーネントを作成し、JSX テンプレートや[MDX の中](/docs/mdx/)の内容に含めます。
+YouTube（または同様の）動画を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム `iframe` コンポーネントを作成し、JSX テンプレートや [MDX の中](/docs/mdx/)の内容に含めます。
 
 次の再利用可能なサンプルコンポーネントには、URL やタイトルなどの動画データのための props や、スタイル設定に必要なマークアップ、そして一般的な `iframe` 埋め込みコードが含まれています。
 
@@ -41,7 +41,7 @@ const Video = ({ videoSrcURL, videoTitle, ...props }) => (
 export default Video
 ```
 
-次に、このコンポーネントを、動画の URL とタイトルの props と共にテンプレートやページに含めます。URL およびタイトルなどの動画のデータは、JSON のインポートや[GraphQL を使用して Markdown から動画を要求する](#GraphQL-を使用してMarkdownから動画を要求する)など、複数の方法で取得できます。また、404 ページの中にイースターエッグとして YouTube 動画を表示するなど、動画を何か面白いもののためにハードコードすることもできます。
+次に、このコンポーネントを、動画の URL とタイトルの props と共にテンプレートやページに含めます。URL およびタイトルなどの動画のデータは、JSON のインポートや [GraphQL を使用して Markdown から動画を要求する](#GraphQL-を使用してMarkdownから動画を要求する)など、複数の方法で取得できます。また、404 ページの中にイースターエッグとして YouTube 動画を表示するなど、動画を何か面白いもののためにハードコードすることもできます。
 
 ```jsx:title=src/pages/404.js
 import React from "react"
@@ -137,7 +137,7 @@ YouTube、Twitch または Vimeo から動画を取得することは非常に
 
 HTML5 は、動画を使用するための `<video>` メディア要素を提供します。 `<video>` 要素の中では、動画プレーヤーが使用できる異なるファイル形式を複数の `<source>` 要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の動画を使用します。
 
-もし、あなたのサイトの `src/assets/dog.mp4` に `dog.mp4` という動画がある場合、他のアセットを使用する時と同様に[webpack を使用して動画をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>` 要素にラップされた `<source>` 要素で参照します。
+もし、あなたのサイトの `src/assets/dog.mp4` に `dog.mp4` という動画がある場合、他のアセットを使用する時と同様に [webpack を使用して動画をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>` 要素にラップされた `<source>` 要素で参照します。
 
 <!-- prettier-ignore -->
 ```jsx:title=src/pages/index.js
@@ -152,7 +152,7 @@ export default () => (
 
 ```
 
-`<video>` 要素の `controls` 属性は、動画にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、 `muted` 属性なら、音声をミュートに設定できますし、 `poster` 属性では動画が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム動画コンポーネントで抽出できます。 `<video>` 属性の完全な一覧は[MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes)で見られます。
+`<video>` 要素の `controls` 属性は、動画にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、`muted` 属性なら、音声をミュートに設定できますし、`poster` 属性では動画が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム動画コンポーネントで抽出できます。 `<video>` 属性の完全な一覧は [MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes)で見られます。
 
 ### 複数のブラウザーと形式のサポート
 
@@ -175,7 +175,7 @@ export default () => (
 
 2 つの `<source>` 要素がありますが、この中から 1 つだけが使用されます。サポートされていれば `mp4` 、 次に `.ogg` 。
 
-**注意**: このとき、指定されたタイプの形式で動画をインポートする必要があります。つまり、 `type=video/ogg` を持つ `<source>` 要素を追加するには、 `.ogg` の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、動画がリモートでホストされる場所の URL を `src` として指定できます。
+**注意**: このとき、指定されたタイプの形式で動画をインポートする必要があります。つまり、`type=video/ogg` を持つ `<source>` 要素を追加するには、`.ogg` の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、動画がリモートでホストされる場所の URL を `src` として指定できます。
 
 [`<video>` 要素を使った例のリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
 
@@ -190,7 +190,7 @@ export default () => (
 
 字幕、文字起こし、および音声解説は、主に見ること、聞くことが困難な人を支援することを目的としていますが、聞くことよりも読むことを好む他の多くのユーザーにとって有益です。字幕は、何らかの理由で音声を有効にできない時に動画を視聴したい人々にも役立ちます。
 
-HTML5 は、 `<track>` 要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>` 要素は、空のタグとして `<video>` 要素の入れ子にします。動画での `<track>` 要素の使用例は次のようになります。
+HTML5 は、`<track>` 要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>` 要素は、空のタグとして `<video>` 要素の入れ子にします。動画での `<track>` 要素の使用例は次のようになります。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -207,8 +207,8 @@ export default () => (
 )
 ```
 
-kind 属性では、 `captions` や、 `subtitles` 、 `descriptions` などのさまざまなタイプを指定できます。 `srcLang` で、この例では英語を字幕で使用される言語として定義しています。そして、インポートされた字幕ファイルがソースとして使用されます。 `<track>` 要素の詳しい属性については[track についての MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track)で読むことができます。
+kind 属性では、`captions` や、`subtitles` 、`descriptions` などのさまざまなタイプを指定できます。 `srcLang` で、この例では英語を字幕で使用される言語として定義しています。そして、インポートされた字幕ファイルがソースとして使用されます。 `<track>` 要素の詳しい属性については [track についての MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track) で読むことができます。
 
-**注意**: 上記のコードスニペットの字幕をインポートするファイルパスには、 `file-loader！` プレフィックスが含まれています。これは、webpack が `.vtt` 字幕ファイルをインポートするのを助けます。
+**注意**: 上記のコードスニペットの字幕をインポートするファイルパスには、`file-loader！` プレフィックスが含まれています。これは、webpack が `.vtt` 字幕ファイルをインポートするのに必要となります。
 
-Gatsby と React を使用した例については、アクセシビリティを伴う[PayPal の HTML5 動画プレイヤー](https://github.com/paypal/accessible-html5-video-player#react-version)をご覧ください。
+Gatsby と React を使用した例については、アクセシビリティを伴う [PayPal の HTML5 動画プレイヤー](https://github.com/paypal/accessible-html5-video-player#react-version)をご覧ください。