B.1 Embed a Web Page: Rescale the Contents

[Back to Section 8.3]

To rescale the contents of a web page and fit it into an iframe:¹³ ¹⁴

Find out the desired dimension of the web page. For example, if we do a screenshot of the Slope Field app web page in a Google Chrome browser, we will see the full width is a little shy of 1050 pixels.
Set up an HTML container (e.g., slope-field-container)and config an iframe (e.g., slope-field-iframe) with the desired dimension.
The zoom factor in this example is 0.75, which was obtained from trial-and-error. It allows the full width of the web page to be displayed in the iframe (i.e., no need for a horizontal scroll bar). Adjust this factor to meet the desired outcome in each individual example.

<style>
/* Set up container */
#slope-field-container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 50%; 
    }

/* Set up iframe */
#slope-field-frame {
    width: 1050px;                  /* Desired height */
    height: 800px;                  /* Desired width */
    border: 2px;                    /* Border thickness */
    zoom: 0.75;                     /* Zoom factor obtained from trial-and-error*/
    -moz-transform: scale(0.75);    /* Scale for Firefox*/
    -moz-transform-origin: 0 0;     
    -o-transform: scale(0.75);      /* Scale for Opera*/
    -o-transform-origin: 0 0;       
    -webkit-transform: scale(0.75); /* Scale for Chrom/Safari*/
    -webkit-transform-origin: 0 0;  
    }

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #slope-field-frame  { zoom: 1;  }
}
</style>

Load the web page in the iframe.

<div id="slope-field-container">
  <iframe id="slope-field-frame"
      src="https://homepages.bluffton.edu/~nesterd/apps/slopefields.html">
  </iframe>
</div>

The difference of using class and id in HTML div is that id is typically used for an individual object (e.g., the desired dimension of a web page changes from case to case) while class is used to define a group with common settings.