How do I make an iFrame the size of my website's layout?

So I was thinking, I’m not that experienced in HTML or CSS, but would if I created my landing pages(for my business) on Weebly and then embedded them into my actual website(one that contains loads of tracking) using an iFrame. By doing it this way(a way I can understand), I won’t have to rip out my hair trying to understand why some HTML code isn’t working. I tried it and it actually worked, but the issue is that it’s not the full size of the website’s layout I embedded it on. Here’s a picture of what I mean:

Here are some other resources:

Weebly Website: http://testlandingpagejl.weebly.com/
Website For Embedding: http://bloggingnetworkonline.com/InternetMarketing/weebly-page/

Try this:

// CSS
 .dims  {
   float:left;
   width:88%; max-width:888px; 
   height:200px; 
  margin:0 4.2em; 
  border:solid 1px red; padding:0.42em;
  overflow:auto;
  }


// iFrame
<iframe class="dims" src="http://supiet.tk" title="$url">
</iframe>

Online Demo

Sorry, I didn’t make myself clear enough. I can only embed it as one program, so how do I do that in regards to your code?

####I am not familiar with Weebly and maybe someone else can help?

If you have access to a stylesheet, I would try to add the supplied CSS and pass the class to where Weebly is calling the iframe.

This document?
main_style.css (51.0 KB)

I’m having a bit of a hard time following the issues here, but if you only have a single page website, wouldn’t it be better (and probably easier in the long-run) to build the page properly, asking for help where required, than to try to find a “quick-fix” method to cobble something together?

I’ve no idea how search engines would “see” a site which consists only of content drawn from elsewhere via an iframe, but I’m guessing they would rank the source, rather than the site embedding it.

1 Like

All I want to do is embed the website, having the iframe’s height and width changed so that it can be viewed on another without programming it into the website. Again, like I stated before, the website that contains the iframe is only meant for tracking(meaning, keeping track of how many sign ups occur), not for search engine ranking. These websites are going to be based solely off of paid advertising.

I still think you may run into more problems with this approach.

If your entire content, including the sign-up form, in contained within the iframe, then it seems to me that any interaction would be with the site where the content is hosted, not the site where it’s displayed. I don’t know how well your tracking would work.

You may also find that a site with no content of its own looks untrustworthy to ad companies - and possibly to visitors, too.

Ok, just curious, are you wanting to help answer my question or not? I honestly do not really care of the “problems” it could bring me in the future. ALL I WANT TO KNOW… is how to do it. Not trying to start an argument here, but I don’t enjoy my time being wasted, sorry.

Try substituting CSS .dims with iframe and add it to the end of the style sheet.

I would also temporarily add a large padding and background colour red to make the iframe more noticeable.

1 Like

My apologies. I was trying to ensure you didn’t waste time by trying an unconventional approach, only to discover further down the road that there are drawbacks you were unaware of.

At an absolute minimum, this will work:

<iframe src="http://www.example.com"></iframe>
iframe {width: 100%;
	min-height: 1500px;
	}

Set the height to whatever you require to ensure the iframe doesn’t throw its own scrollbars. Be aware that the height of the contained page may vary at different screen widths, if it’s responsive, so the size you set here will be a trade-off between ensuring it is large enough for most circumstances, whilst not making it excessively long.

If you want an iframe page to take over the whole page and not look like an iframe then you can try something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<iframe style="position:fixed;left:0;top:0;right:0;bottom:0;overflow:auto;width:100%;height:100%;" name="myFrame" frameborder="0" src="http://landingpagejosephl.weebly.com/"> 
</body>
</html>

There may be issues if the iframe content is not fluid as you may get double scrollbars.

4 Likes

Thought I might actually post the new question here.

I’m adding this website into another website by using an embedded HTML block, so how would I be able to make the iframe the size of its container so it doesn’t take up the entire screen, but rather look something like this?

The reason for me asking this is because I have a title right above the video. If there is a way I could decrease the size of the iframe to show the title above the video and not go outside of the gray area, I’d be happier than ever. To see the gray area I was referring to, check out the website: http://bloggingnetworkonline.com/InternetMarketing/landing-page/

josephlewandowski,

The design of the web page that you want to view in the iframe determines how it will fit in the iframe. If the page to be viewed is responsive, then you can size the width of the iframe pretty much as you please and only trigger a vertical scrollbar, if needed. If the page to be viewed is not responsive, then you are limited to using an iframe that is at least the same width as the page to be viewed or know that you will trigger a horizontal scrollbar if the iframe is narrower than the page to be viewed which is generally undesirable.

Give the iframe a border so we can see it. Tell us if the page to be viewed is responsive or not.

1 Like

How do I make this iframe extend to the gray area, but show the title at the top? Here is my website to understand what I’m talking about: http://bloggingnetworkonline.com/InternetMarketing/landing-page/

Also, here is the iframe:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<iframe style="position:fixed;left:0;top:0;
right:0;bottom:0;overflow:auto;width:100%;height:100%; name="myFrame" frameborder="0"src="http://landingpagejosephl.weebly.com/"> 
</body>
</html>

You’re missing a quote and a space to start with

<iframe style="position:fixed;left:0;top:0; right:0;bottom:0;overflow:auto;width:100%;height:100%;" name="myFrame" frameborder="0" src="http://landingpagejosephl.weebly.com/">

I think that was my fault from the other thread with my bad typing.:frowning:

Threads merged.

1 Like

It’s still not clear what you want from your descriptions as I see no gray area in your iframe or indeed any heading?

I’m guessing that you want your iframe centred in the page at a fixed/max width but that you want to add your own html above the iframe perhaps?

If you center your iframe at a max-width then the scrollbars will appear on the iframe and not at the edge of the viewport which I thought was what you initially wanted. You could do something like this although its a little bit rigid and hacky.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{background:#ccc;}
.test{
	height:150px;
	overflow:hidden;
	max-width:980px;
	margin:auto;
	text-align:center;
}

</style>
</head>
<body>
<h1 class="test">Non responsive fixed height title goes here</h1>
<iframe style="position:fixed;left:0;top:160px;right:0;bottom:0;overflow:auto;width:100%;max-width:980px;margin:auto;height:calc(100% - 160px);" name="myFrame" frameborder="0" src="http://landingpagejosephl.weebly.com/"></iframe>
</body>
</html>

However, I’m not really sure what you are after. Iframes are very difficult to work with in responsive sites and if you are trying to pass them off as being a native element then it becomes harder still.

Somewhere in the HTML for the landing-page, you have this container which eventually displays the video. I can see that this landing-page has gray bars along the sides. However, I do not see a page with an iframe. The landing-page does not have an iframe unless it is being added by a script.

<div class="so-panel widget widget_text panel-first-child" id="panel-256-0-0-0">
...
</div>

Right, I was only using that website as a reference to what I was talking about. Here is the website with the iframe in it: http://bloggingnetworkonline.com/InternetMarketing/iframe-test/