Preloading Image/Loading Video Before Playing

I have a gif that I am using as a preloading image using interactions 2.0. I am using flex to have it perfectly centered in the middle of the browser. When the page is finished loading I have the opacity of the preloading image transition to 0%. Questions:

  1. How do I have the preloading image swap out for a video I want to play in it’s place?
  2. Since the video is playing from a url, how do I get the preloading image to stay visible until the video is fully loaded and then shows the video instead of the preloading image?
  3. And finally, how do I design the page the way I want when the video is still in the center of the browser? I want the video, which is my animated logo video to move to the top of the page once it is done animating and then be able to design the home page the way I want to. I thought I was going to be able to do all this with interactions 2.0, but I just can’t figure it out.

Thanks for any help. I have inlcuded the shared link to the site. If you preview it I have the preloading image transitioning to 0% opacity when the page loads.

https://preview.webflow.com/preview/craftcards-beer?preview=5a96ac09935288795673c9d7ce1e3cb3