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.

    Allowed Sources

    WDS restricts what websites can be embedded via an iframe. Contact WDS if your iframe is not loading correctly. 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
    • *.anchor.fm
    • *.vimeo.com
    • *.youtube.com

    Some websites 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.

    1. In body field of your content page, click globe icon from text editor

      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.