2

I have this code I put together from various sources to allow embedding an iframe of a specific part of a page:

<style type="text/css">
body {background:transparent;
height:2000px;
width:870px;
}
</style>
<div style="border: 1px solid rgb(250, 0, 0); overflow: hidden; margin: 0px auto; max-width: 900px;">
<iframe scrolling="no" src="https://https://sites.google.com/site/yourcommentsite/test" style="border: 0px none; margin-left: -15px; height: 9999px; margin-top: -365px; width: 900px;">
</iframe>
</div>

The reason for this code is explained here: https://sites.google.com/site/yourcommentsite/

The first part is for transparency around the iframe, inside the gadget that will include the iframe (doesn't work with Google Site unless it's in a gadget). Then I make a red bordered "window" that includes the iframe of a site. I size the iframe and position it relative to the "window" and I have the comment section embedded. This code embeds a 900px wide and 9999px long iframe.

This is for use with Google Sites, to allow embedding of a specific part of the page of another Google Site.

The problem is: it's not responsive, so the istructions are a bit complicated and dependent on user's screen resolution, so people trying to use it will be making a fixed size iframe, and other displays will cut the iframe or make it too small. If the iframe is cut/overflows a scrollbar will appear, but it's not the cleanest solution.

I want to make it responsive, but solutions I've seen I can't make them work with the "window" that allows getting a specific part of site only.

I know close to nothing of coding, so could you help me find a solution?

Also, it's very difficult to add javascript to Google Sites, and it doesn't allow src="xxxx.js" or "xxxx.css".

Thanks!

Peaceweapon
  • 23
  • 1
  • 5
  • Possible duplicate of [How to get an IFrame to be responsive in iOS Safari?](https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari) – Michael Freidgeim Mar 05 '18 at 19:57

1 Answers1

1

Have a look at my example at http://jsfiddle.net/7k3sscdk/. This works by setting the height and width of everything to 100%. But, if the site that the iframe is pointing to, is not responsive, you can't make the iframe content responsive on your site either.

<iframe src='http://www.example.com' style='border: 0;' width='100%' height='100%' scrolling='no'></iframe>
Zak
  • 1,910
  • 3
  • 16
  • 31
  • Thanks for the answer. That works with the raw page (it's a responsive page), but I want to iframe only a specific part of the page, and using your example I get the whole page. If don't I add the "window" it won't do what I want, which is have a specific part of the page only. In this case what I want to embed from that page is from "Comments" down only – Peaceweapon Aug 27 '14 at 15:56
  • In that case, take a look at [this](http://stackoverflow.com/questions/3272071/iframe-to-only-show-a-certain-part-of-the-page). – Zak Aug 27 '14 at 15:57
  • ok, so I did this: `` but even if it takes me to the comment section, it shows everything else too. I'll try adding the window to this to see if this works – Peaceweapon Aug 27 '14 at 16:44
  • Ok so I came up with this `
    `     – Peaceweapon Aug 27 '14 at 22:48
  • I put it in the gadget and it works. It's not incredibly elegant, since the gadget is only 2000px high (have to mess with the HTML of the page to change it and allow 10000px) and I have to take out the scrollbar of the gadget (or it shows the part of the page I'm trying to hide), but it's working. Thanks for the help! – Peaceweapon Aug 27 '14 at 22:50
  • of course, sorry I can't +1 yet, but accepted. Once I'm 15 rep I'll come back and +1. Just noticed I can use the scroll bar! the code is perfect now. Want to see it live go to https://sites.google.com/site/yourcommentsite – Peaceweapon Aug 28 '14 at 12:03