IFrame

Use IFrames to display content hosted on another website.

An IFrame, short for Inline Frame, is an HTML document embedded inside another HTML document. Typically, IFrames serve 3rd party content such as a YouTube video. IFrames can be seamlessly added to the page so that the user is unaware that the content is being hosted and managed by another source. An out-of-the-box IFrame will have a fixed size and is likely to disrupt a responsive, fluid layout.

Embedding longer content or mixed-height content is a bit more tricky. The IFrame will need to have scroll bars so that the IFrame can be scrolled.

External Styles

If possible, style the content on the external site to look consistent with our styles.

Style with app.css

Link to the internal styles in the head of the document.

Save page load by repeating the style sheets already loaded
Keep styles consistent by referencing the same file

<link href="//simons-rock.edu/_resources/css/app.css" rel="stylesheet"/>

Use Web Fonts

Loading the internal styles won't work for the webfonts.

Include the _fonts directory at the top level of the server
Add the iframe-compiled.css file to the top level of the server
Add font-awesome.min to the top level of the server
Add the link in the <head>

<link href="/_css/iframe-compiled.css" rel="stylesheet"/>

Depending on where the font files live, the .css files may need to be updated.

Additional IFrame Styles

There are additional IFrame style rules.

Add class iframe to body: <body class="iframe">
Update the iframe.scss for any additional style needs

Embed IFrame

Embed the IFrame to optimize usability.

<div class="embed-wrapper">
  <div class='embed-container-scroll' style="height: 4100px;">
    <iframe src='/family-weekend.php'></iframe>
 </div>
</div>

Change the height based on the length of the content
Change the link based on url of the IFrame
Be sure to use https for external sites