Is there fully responsive iframe code that will successfully embed a parallax site?

1.5k views Asked by At

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?

0

There are 0 answers