Skip to main content

Oregon State Flag An official website of the State of Oregon »

Oregon.gov Homepage

IFrame Case Study

Scenario

As a site owner, I want to embed an application (e.g. a form, video, etc.) hosted on another website into my page so that visitors can interact with it without leaving the webpage.

This scenario is very common: a site owner has a very well-written solution for intaking or presenting information which has been built by their technical team or a vendor (such as a form) or a video. The site owner would like to embed that solution into the page so that it appears as part of the page. This approach enables the site owner to market a single page which includes both the embedded application and information about it. Examples may include:

  • Contact forms
  • YouTube videos
  • Google calendars
  • Live project statuses
  • Live DMV wait times
An Iframe is the most convenient way to embed an external application into a page. This guide will discuss how to embed an application hosted on another website using an Iframe.

Content Storage

Since the application the site owner wishes to embed is hosted on a website other than their own, no additional content storage is necessary other than the Style Library, located at the root of your website (e.g. https://www-auth.oregon.gov/myAgencyWebsite/Style%20Library).

Required Web Parts

The Content Editor web part is necessary for this solution. This web part is available as part of the standard features of your website.

Accessibility Requirements

Iframes require a few thoughtful details to ensure they are usabile and described well. These details ensure that the content is introduced and described in a way that is friendly for those reliant on assistive devices such as screen readers:

  • Include a title element and a value which describes the content of the frame (e.g. title="General Contact Form")
  • Name the document being sourced (e.g. web page) something relevant and human-readable in case it's read out loud (e.g. src="general-contact-form.html")
  • Ensure the sourced application is just as well-written and accessible as your website. Embedding an external application makes it an extension of the website you manage, so you are responsible for its content
  •  If the sourced document is a video, ensure that the transcript is available for the listening imapaired

Directions

To create an accessible Iframe and embed it into a web page, use the following directions:

  1. Using a text editor, create a new .txt document and write the Iframe code in it
  2. Save the .txt file, naming it something relevant and human-readable (e.g. oregon-exaggerated-video.txt)
  3. Log in to your website
  4. Navigate to the Style Library at the root of the website
  5. Upload the .txt file and Check In and/or Publish the document
  6. Visit the page where you wish to insert the Iframe
  7. Check the page out for editing and begin editing the page
  8. Click/touch where the Iframe should be inserted, ensuring the cursor appears in that location
  9. Select Insert > Web Part > Media and Content category > Content Editor web part > OK
  10. Scroll down to where the Content Editor web part was inserted
  11. Select the down arrow at the top of the web part
  12. Select Web Part Properties
  13. Insert the relative path (e.g. /yourWebsitePath/style%20library/oregon-exaggerated-video.txt) as the Link
  14. Select OK
  15. Check In and/or Publish the page
The web part should now appear. If it does not appear, check the Console for any errors, including security issues like cross-domain blocks, etc.

Code Snippet


<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/KIC-XmyEfhI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Oregon, only slightly exaggerated YouTube video">
Loading...
</iframe>

Example