【HTML,CSS,JavaScript】動画をパララックスする

写真をパララックスにするプラグインの紹介などは結構あったのですが、動画は意外となかったのでメモ。
動画の埋め込み自体あんまり使うことないんですが、どうしてもやらなきゃいけない＆時間かけられない時にさくっと実装できます。

動画をパララックスさせたい

１） 下記リンク先 backgroundVideo にアクセス、distフォルダ内のjsのどちらかを読み込ませる。
https://github.com/linnett/backgroundVideo

２） 任意のクラスをVIDEOタグにつけて、以下のようなJavaScriptの記述をする。

index.html

<video class="bv-video"></video>

<script>
new BackgroundVideo('.bv-video', {
  src: [
    //動画保存先のパス
    'MY/EXAMPLE/PATH/SAMPLE.mp4',
    'MY/EXAMPLE/PATH/SAMPLE.webm'
  ]
});
</script>

３）　高さを上書きしたい場合は、 .bv-video-wrap クラスに !important をつけて高さを上書きする。

style.css

.bv-video-wrap {
   height: 500px !important;
}