iframe with Edge Animate not responsive on iPhone

I have successfully added an Edge Animate block to a Squarespace page. The only way I could figure out how to do it after scouring the Squarespace forums and googling was to use an iframe. It is working great EXCEPT for on the iPhone. The animation is not scaling so all you see is the top piece of it. Any ideas how to solve this?

Page:

https://karen-nagano.squarespace.com/

HTML:

Custom CSS:

.edge { width: 50%; margin: 0px auto; }

.iframewrapper { height: 0; width: 100%; padding-bottom: 49.78%; overflow: hidden; position: relative; }

.iframewrapper iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

Thanks in advance!