Gatsby.jsのページローディングに動画を使用している場合に必ず動画の終了時に消したい

// gatsby-browser.js

// Gatsbyの"onRouteUpdate"を使いローディング完了時に処理を走らせる
exports.onRouteUpdate = () => {
  const loader = document.getElementById("loader")
  const video = loader.querySelector("video")

  // videoへループを設定しているのでそれをまずは解除する。
  video.loop = false

  // loopを解除するとMediaエレメントの"ended"イベントが動画終了時に走るようになるので使う
  video.addEventListener("ended", event => { 
    loader.classList.add("loaded")

    setTimeout(() => {
      loader.remove()
    }, 500)
  })
}