fullscreen iframe embed

Hello!
I'm trying to have this fun toy I made in Cables.gl fill the entirety of a section for the home page of my site. The goal is for it to fill the screen entirely underneath the header and above the footer.
This is the page I want to add it to:
https://dampwetbody.xyz/home
 

This is the thing I am trying to add
https://cables.gl/p/rZqwDb

Using this embed code:
<iframe style="width:640px;height:480px;border:0px;" src="https://cables.gl/view/630c2964975b8e86b85d8623"></iframe>

I have changed the width and height values, but once it reaches 100% width it becomes thin and the height value seems to not change anything.

I have limited experience with custom css and html so any help would be greatly appreciated!
Thanks!

Hi,

It looks like you figured it out?

kind of, this solution doesn't seem to work very well for mobile sites,
Preferably the page would resize to fit the screen for all resolutions.
It also extends a little below the screen when I would prefer it fit the screen between the header and footer.

Any ideas?

 I added this to the css

}
#iframetoy {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0px;
    overflow: hidden;
}

#iframetoy iframe {
    position: absolute;
    top:-2px;
    left: -2px;
    width: 101%;
    height: 102%;
}

and this to iframe embed 
<div id="iframetoy">
<iframe src="https://cables.gl/view/630c2964975b8e86b85d8623" ></iframe>
</div>

If anyone happens to find this again, 
I seemed to find a solution by adding this to the individual pages header as tuanphan recommended to another user a while ago

<style>
html, body {margin: 0; height: 100%; overflow: hidden}
</style>

then this in the iframe embed itself

<iframe src="https://cables.gl/view/630c2964975b8e86b85d8623"
  width="100%" height="95vh" frameborder="0" scrolling="0" style="
height: 95vh;
" seamless="seamless" allowfullscreen="allowfullscreen"></iframe>

Hi, I also have a similar issue:

I am trying to embed this dashboard to my site using iFrame. Right now it won't adjust to different size screens and doesn't fill the entire page.

I would like the entire page to be my dahsboard, then have the header on top and footer at bottom.

Should be simple enough?

Thanks

I am using this code at moment:
<iframe src="https://fatbeats.sagedataanalytics.com/Default/View/Public/Fat%20Beats%20Vendor%20Dashboard?embedded=true&amp;Filter="
  width="100%" height="95vh" frameborder="0" scrolling="0" style="
height: 95vh;
" seamless="seamless" allowfullscreen="allowfullscreen"></iframe>