Iframe Block

Iframes are used to embed content from another website into a page on your website. If your content resides in another system and RSS feeds are not appropriate for pulling content into your website, then using an iframe may be appropriate.

Usage Instructions

The Iframe block is quite simple to use. Aside from the optional block title, there's a single input field to paste in the iframe HTML snippet. Here's an example iframe embed code for a Google map:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3040.966273019781!2d-74.65726258379776!3d40.343094179373814!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c3e6d8cd98b6e9%3A0x2ba7ed6fa90024f!2sPrinceton%20University!5e0!3m2!1sen!2sus!4v1616616719334!5m2!1sen!2sus" width="600" height="450"></iframe>

Some HTML attributes the iframe embed will be stripped out when the block is displayed, but the essential attributes will be left as is.

You may need to add or change the width and height HTML attributes if the embedded iframe does not display at the desired size. Example:

width="400" height="400"

Allowed Sources

WDS restricts what websites can be embedded via an iframe. Contact WDS if your iframe is not loading correctly. WDS may be able to add an additional site to the allow list for your site. Here's a sample of some of the sources that are allowed on all sites:

  • *.princeton.edu
  • *.google.com
  • *.kaltura.com
  • *.cdnapisec.kaltura.com
  • *.libsyn.com
  • *.vimeo.com
  • *.youtube.com

Some websites, such as the main princeton.edu website, purposefully block their content from being embedded in iframes. Keep this mind when troubleshooting.

Embedding Secure Iframes

If you embed an iframe into the website, it is important that you embed it as secure content. Make sure the URL has "https" in the URL or else you will receive a warning message. Only https:// sources are allowed to be embedded.

Alternative Option

Rather than embedding an iframe into a page layout using the Iframe Block, you can also embed an iframe directly in the body field of a page using the iframe icon in the editor toolbar. Unfortunately, this dialog for this feature cannot parse the full iframe code, so you have to extract the URL from the src attribute of the iframe code (everything between the quotation marks after src=) and paste it into the URL field.

  1. In body field of your content page, click the globe icon in the editor toolbar.

    Insert iframe and view source code
  2. Enter URL (https:///...)
  3. Enter Width and Height
  4. Enter Name 
  5. Enter Advisory Title (Title of content for screen readers)
  6. Click Ok
  7. Click Save

Usability Concerns

Generally speaking, WDS does not recommend embedding iframes on your site. Instead it is almost always a better user experience for your visitors to link directly to the website instead of embedding it, especially on smaller screens like a phone.

Embedding a Site Builder Page on Another Site

Site Builder sites forbid other websites from framing the content of Site Builder pages. This is a security feature so that a malicious website, such as a phishing campaign, cannot impersonate a Site Builder site and inject a malicious script into a page that contains the framed content. WDS does not have a mechanism for overriding this security feature on an individual site.

This security feature is also active on the main princeton.edu website.