Prior Research:
I've researched this issue extensively on the web but found no directly pertinent results. I searched this forum on the terms "iframe responsive parallax." There were a number of results, all of which I've read, but none addressed this issue. Since the issue arises from my website building efforts on Squarespace, I searched the Squarespace Answers Forum but to no effect.
Statement of the Issue:
Squarespace websites, built on both non-parallax and parallax templates, are responsive. I have iframe code (HTML & CSS) which is responsive when embedding a non-parallax Squarespace site but when embedding a parallax site is non-responsive. The parallax site is itself responsive but when embedded in an otherwise responsive iframe is not.
Underlying Facts:
On a test page of a Squarespace site I built, I have iframes embedding: a Google Doc, the Wikipedia site, a non-parallax Squarespace site (familyhistoryconferencenwadotorg), and a parallax Squarespace site (maisonwillemtell.squarespacedotcom)). All the iframes but the parallax one are responsive. In the parallax iframe the parallax feature functions improperly.
The relevant code is:
//CSS and HTML:.iframe-container {
position: relative;
margin: 5px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px solid #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */
}
.iframe-container-for-wxh-500x350 {
padding: 10px 10px 70% 10px; /* padding-bottom = h/w as a % */
}
<div class="iframe-container iframe-container-for-wxh-500x350"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="http://www.targetWebsiteURL.com">
<p style="font-size:110%;"><em><strong>IFRAME: </strong>
There is iframe content being displayed here but your
browser version does not support iframes.
</em> Please update your browser to its most recent version
and try again.</p>
</iframe>
</div>
The rationale behind the code can be found at How To Make Responsive Iframes -- It's Easy!.
The Question:
Is there fully responsive iframe code that will successfully embed a parallax site?