Need help with displaying an interactive object on desktop and mobile

Hello, I need help making an interactive animation on my site display correctly. I have an animation that I want to take up the full screen underneath the header on the home page. It is an html5 object that I created in Adobe Animate. It is not currently interactive, but I would like to make it more interactive once I figure out how to get it to display correctly.

I have two versions on my site. The one on the home page is exported with responsive settings from Adobe Animate.

This looks pretty close to desired, although what I really want is to just fit the animation in the vertical (height) dimension of the window. It is currently taller than this and being cut off on the top. I have no idea why the top of the animation is above the top of the screen. I attempted to put a spacer block above the animation to push it down and that achieves the "close to correct" solution that I have here, but it seems like the wrong answer.

On mobile it looks terrible.

It is not stretching to fit the vertical space at all and no amount of my fiddling with html seems able to resolve this. (if you could not already tell I am in no way a coder.)

I thought maybe the problem might stem from the responsive settings in animate conflicting with the responsive settings in squarespace. Or at least that if I removed the responsiveness from animate it would make it easier to manipulate html to make the block do what i wanted it to do, so I exported another version of the animation from Adobe without the responsive settings. It is found on the non responsive tab at the top. It looks like this:

Which I guess is ok, but a little sad compared to the full screen that i want it to be. Also, it does not load when you first go there for some reason (you might need to hit refresh to get it to load). Also when I resize the window, the object does not resize (duh, because it' s not responsive now)

and on mobile it looks really bad because it is not resizing at all (or centered).

Anyway, any help that anyone can provide would be very much appreciated. If you have another way of doing this entirely or think I should be using a different template too, please let me know, I am open to any suggestions at all at this point. 

To reiterate, really the only thing that I want to happen is for the whole thing is for the animation to be centered and fill the entire height of the viewport underneath the header. That doesn't sound too hard does it?

Thank you for any help you can provide! If you can provide a solution for this that gets it to do what i want, I will draw you anything you want! (within reason)

Hi,

Can you share link to this page? We can check easier

Oh sorry, I didn't realize they weren't in there. Weird, it asks you for the link in order to post but doesn't show it in the post anywhere.

Here is the home page with responsive settings:

https://www.williambredbeck.com/

and here is the page where I tried exporting the animation without responsive settings:

https://www.williambredbeck.com/nonresponsive

Thank you for any help you can provide!

You want to resize it on mobile like this?

No, I want to resize it so it fits the vertical space of the window (and centers) like this:

Either that or I guess I would need to make a separate file for mobile. But I have no idea how to tell it to play the separate file.

Yes. If you can add 2 sections with 2 files, I can give code to show 1 on desktop, show another on mobile

ok, I will make another file and put it on the same page.

But I am a little skeptical of this solution. Currently it is almost working. It looks like this:

The only problem is that it is not fitting the viewport. It is centered up high for some reason. Maybe it is centered where the code block is? I need the animation holder to stretch vertically to fit the viewport window. I want that same rule to apply on both mobile and desktop. Won't this problem persist if I give you another file?

If stretch it fullheight, it won't be fullwidth

The only solution is make it align center, so you will see a gap on both top/bottom of screen

@tuanphan I don't quite understand, but maybe that's why I am a humble scribbler and you are a squarespace legend. It seems like if it was stretching to fit the height on mobile it would fill up and overflow on the sides. 

But what do I know! It seems like I missing something fundamental.

Anyway, I have made a vertical aspect ratio version of the animation and uploaded it under the other animation and now it appears that the whole thing is not working. Should I revert? 

https://www.williambredbeck.com/

Maybe there is a file conflict? Not sure what's happening.

Ok, I tried removing it from the page with the normal animation and it started working again.

www.williambredbeck.com

I put the vertically oriented animation on this page:

www.williambredbeck.com/mobile-home

I also put the non-responsive experiment page in the unlinked section so it wouldn't appear in the top nav here:

www.williambredbeck.com/nonresponsive

As you can see the vertically oriented page looks similar to the normal home page, does not come down to the bottom of the viewport, and is not centered.