Jump to content

fullscreen iframe embed

Recommended Posts

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!

 

 

Link to comment

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>

 

 

Link to comment

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>

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.