iframe screws up everything happening beneath it

Site URL: https://www.topherblair.com/

Hi,

 I'm hoping to add in a code block for iFrame that will reference a little puzzle that I made in Unity, and is hosted on AWS. I'm using the Gravity template, which means that most people will be experiencing my site by scrolling down through it. My problem is that whenever I put my code into the site, almost everything beneath my iFrame code disappears. Has anyone else had this problem? My site is www.topherblair.com, and I've put the code that I'm using at the very bottom of my page so that it doesn't screw anything up, but I'd like to put it in the "Interaction Design" section.

Any help would be appreciated, thanks!

<iframe src="https://shakeysfolly21.s3.us-east-2.amazonaws.com/index.html" overflow:hidden; 

frameborder = '0';        
        
width= 100%; 

height= 600;

title="puzzleWheel" 

scrolling="yes" 

overflow="hidden"

overflow-y="hidden"

allowfullscreen="true";>

Your syntax is a bit off. Try the following.

<iframe allowfullscreen="true" frameborder="0" scrolling="yes" src="https://shakeysfolly21.s3.us-east-2.amazonaws.com/index.html" style="height : 600px; overflow : hidden; width : 100%;" title="puzzleWheel"></iframe>

Let us know how it goes.