Scale mobile landing to page to proper size

Site URL: https://faintinggoatradio.com

My landing page is a video that I have coded into my home page. It looks pretty good on the computer, I'm having problems getting the code right to scale it on mobile devices. Can anyone please help? To be as clear as I can, I loaded a mp4 video into the custom CSS area, and then clicked on it to copy the information. Then I wrote this code in the advanced settings for the home page so it only plays when you visit the website the first time. Heads up, I know nothing about code. This is the code I have so far:

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/5fdcd8461f9b8b546a80a7df/t/6007364112ae981e81de7453/1611085385667/FGR+Landing+Page+Extended+.mp4" backround="transparent' speed="1" style="width: 100vw; height: 100vh;">
</div>

<style>
.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f3f3f5;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 3s;
  animation-delay: 5s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: 100vw;}
}
</style>

Hi. Where is video? I don't see it on homepage

It should be about 8 seconds long and play when you first visit the site, it says preparing your listening experience, and wipes to the right, revealing the website. thank you for responding 🙂