Gatsby.jsで背景に動画を埋め込む方法

特別プラグインやコンポーネントを作成しなければならない訳ではなく簡単に実装できます。
CSSでbackground-imageとして実装するのではなく、index.jsに書き込みます。

Gatsby.js
＊埋め込みたい動画はプロジェクトフォルダ直下のstaticファイルに埋め込みます。

<div class="bg-movie">
    <video　className="video-player"　height="100%"　width="auto"　loop　muted　autoPlay>
        <source src="/movie.mp4" type="video/mp4" />
    </video>
</div>

CSS

.bg-movie{
    width:100%;
    height:700px;
    position: relative;
}

.bg-movie video{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}

参考記事:https://spectrum.chat/gatsby-js/general/make-video-a-background-with-no-sound~4fff27a4-a458-4ba3-a767-10734230ed1d