More than 3 years have passed since last update.

Gatsbyで動画自動再生に手こずった（mp4）

Last updated at 2021-04-10Posted at 2021-04-09

##サイトによくあるトップページの動画自動再生・・・

なかなか動かなくて調べました。

JSXとの兼ね合いで良い記事が見つからず、あれこれ試したが、
<vide src="/images/~~~~~~~.mp4"></video>では動かなかった。

<video autoPlay loop muted playsInline controls style={{ width:"100%" }}>
  <source src="/images/~~~~~~~.mp4" />
</video>

<source>タグを作って内側に書くという方法。

レスポンシブにするかは**style={{ width:"100%" }}**の部分をつけるか外すか。

※ここのHTMLなどをJSX記法に変換してくれるオンラインツール便利すぎた！！！
HTML to JSX Compiler