Jump to content

Dynamic iframe

Recommended Posts

I am trying to create an iFrame that will resize based on the size of the user's window. I really don't know any code, but I have copied and pasted html to get what I want as a static size.

Here is the html code I have right now:

<iframe src="https://teachingheartandsoul.s3.us-east-2.amazonaws.com/Story+Prompt+Generator/story.html" style="border:0px #ffffff none;" name="Story Prompt Generator" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="649px" width="1155px" allowfullscreen></iframe>

It creates the iFrame, but it doesn't allow it to adjust according to screen size.

How can I edit this code to make the size automatically fit the screen?

Or, is there custom CSS to add to do this? (I haven't used this feature before, but I know it exists and saw a solution to a similar problem that used custom CSS.)

Please understand that I don't have any coding background when you respond. Thanks in advance for any help!

Link to comment

You can add some code like this under iframe to adjust on other screen sizes

<style>
  @media screen and (min-width:768px) and (max-width:1024px) {
    iframe[src*="amazonaws"] {
    	width: 100% !important;
      height: 500px !important;
    }
  }
    @media screen and (max-width:767px) {
    iframe[src*="amazonaws"] {
    	width: 100% !important;
      height: 900px !important;
    }
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I wasn't sure how to put the two together.

This is what I ended up doing:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <iframe src="https://teachingheartandsoul.s3.us-east-2.amazonaws.com/Story+Prompt+Generator/story.html" style="border: 2px solid white; width: 100%; height: 100vh;" name="Story Prompt Generator" scrolling="no" frameborder="0" allowfullscreen></iframe>
</body>

Link to comment
On 9/8/2023 at 1:14 AM, BethZ said:

I wasn't sure how to put the two together.

This is what I ended up doing:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <iframe src="https://teachingheartandsoul.s3.us-east-2.amazonaws.com/Story+Prompt+Generator/story.html" style="border: 2px solid white; width: 100%; height: 100vh;" name="Story Prompt Generator" scrolling="no" frameborder="0" allowfullscreen></iframe>
</body>

Replace your code with this + then add my code under (html, head, body tag is not needed

 <iframe src="https://teachingheartandsoul.s3.us-east-2.amazonaws.com/Story+Prompt+Generator/story.html" style="border: 2px solid white; width: 100%; height: 100vh;" name="Story Prompt Generator" scrolling="no" frameborder="0" allowfullscreen></iframe>
<style>
  @media screen and (min-width:768px) and (max-width:1024px) {
    iframe[src*="amazonaws"] {
    	width: 100% !important;
      height: 500px !important;
    }
  }
    @media screen and (max-width:767px) {
    iframe[src*="amazonaws"] {
    	width: 100% !important;
      height: 900px !important;
    }
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.