Embeddable Media

Stanford Sites offers the ability to add embeddable media such as social media feeds, forms, and data visualizations.

Best practices

Stanford does not support single sign-on (SSO) through an iFrame. This is a University-wide policy for security purposes to limit cross-site scripting and cross-site request forgery vulnerabilities. We recommend sending users to the desired content by linking directly to the secured page instead of using iFrames.
All embedded content must comply with Stanford's Terms of Use for sites. Please make sure you are familiar with these policies before using an embeddable from an external service. Any content found to violate this policy will be removed.
Anything that should be deployed sitewide, like user tracking codes, analytics tools, and chatbots should not be added as embeddable. Learn more about best practices for managing these in our section on Marketing and Analytics.
Monitoring the availability of the 3rd-party service you have chosen to embed on your site is your responsibility. Recent trends in social media have affected several common uses for embeds.

Accessibility best practices for embeddable media

Most embeddable content is not fully accessible.

If there are accessibility issues, you must provide an alternative approach to accessing the content.
- If you're embedding a podcast or other audio files with spoke content, add alternative text such as transcripts or an additional description. Learn about writing alternative text for images and other media.
To have your embedded content reviewed, contact the Office of Digital Accessibility. Learn more about your responsibility as a site owner
Avoid anything that autoplays. If something does autoplay, make sure it can be stopped. See Understanding SC 1.4.2: Audio Control (Level A).

How to add embeddable media

There are three methods for adding embeddable media:

Method 1 - You can add some common embeddable media on your own
Method 2 - You can add some common oEmbeds
Method 3 - You can submit an embeddable source that is not on the supported list for review by SWS

Videos and Google Forms do not need to be added using these methods. Stanford Sites offers direct methods for getting that content onto a page.

Once embeddable media have been added to your site's media library, site managers can place them throughout the site by adding them to text area paragraphs.

Method 1: embed codes

An embed code is code that is generated by a third-party website such as Smartsheet or Airtable, that a user can copy and paste into his or her own webpage. This embedded code will then show the same media, application, or feed on the user's web page as it does in the original source. Changes to the source materials will result in an update on the webpage.

Note: Currently only the following embed codes are allowed via this method:

Sharepoint Document
Airtable
Smartsheet
Google IFrames
Outlook Calendar
Localist Events

Adding embed codes

On the website of the desired service, copy the entire embed code.
Returning back to your Stanford Site, from your site’s admin menu navigate to All Content > All Media > Add Media > Embeddables.
Paste the code in the Embed Code box.
Enter a name for the widget that describes the content, for example, “BeWell Events Localist Widget.”
Leave the oEmbed URL empty.
Click Save.

Method 2: oEmbeds

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Supported oEmbeds

The following oEmbed services have been tested for use on Stanford Sites and can be added directly by site managers to their sites.

ArcGIS StoryMaps
CircuitLab
Dailymotion
Facebook
Flickr
Getty Images
Instagram
Issuu
Livestream
MathEmbed
Simplecast
SlideShare
SoundCloud
Spotify
Stanford Digital Repository
Twitter

Please note that some embeds may not look or behave exactly as desired. Embeds can cause performance, accessibility, usability, and other issues. Due to this, we recommend testing your embeds carefully before publishing. If you are having trouble with an embed displaying incorrectly on Stanford Sites, please send us more info through our Stanford Web Services ServiceNow form.

Add oEmbed media

In the administrative toolbar select Manage then hover over All Content > All Media > Add media > Add Embeddable to be redirected to the “Add Embeddable” page:
Enter a name for your embedded media in the corresponding text field.
Enter the URL of the media to embed in the corresponding oEmbed URL field.
Click Save.

Once the embedded media has been added to your site's media library, they can be added within the text area paragraph type.

Method 3: submit for review

Stanford Web Services developers review embeddable codes to ensure the stability and security of our platform.

You can submit any embeddables that are not on the supported list for review by SWS developers. If the embeddable passes review, we will add it to your media library and you can use it just as you would for anything added using the methods listed above.

Use your embeddable

Once the embedded media has been added to your site's media library, they can be added within the text area paragraph type.

Common problems

Error on save for embed code or "Inline Frame Missing a Text Alternative"

If you get an error while saving the embeddable, check to make sure your iFrame has a title attribute. This is required for accessibility and validation of the embed code.
The title attribute provides alternative text and makes the that information available to assistive technology. It looks like:

title="[Title of media item]"

Here's a full example:

<iframe frameborder="no" height="200px" scrolling="no" seamless="" 
  title="Eric Appel: Gels are changing the face of engineering ... and medicine" 
  src="https://player.simplecast.com/a0b3e735-7259-44b5-9e5f-10451c26461b?dark=false" width="100%"> 
</iframe>

If you embed an iframe without a title it violates WCAG 2.1: Understanding Success Criterion 4.1.2: Name, Role, Value. Siteimprove will flag the issue as:

Siteimprove issue: Inline frame missing a text alternative.

Error on save for OEmbed

If you're unable to save the URL in the OEmbed form, make sure there are no extra characters such as spaces at the end of the URL.

Embed not displaying

If your embed is not displaying as expected, try logging out. Some embeddables render only for anonymous users.
HTML elements should all be lower case letters.

Performance issues

Embeddable media can make your page slow to load. If this is the case, you may want to find alternatives to embedding content. For example, a YouTube video or Twitter feed will make the page load considerably slower. Consider using a link to the video or Twitter feed instead.

Known issues with 3rd party embeddables

Instagram embeds cannot be resized. You would need a social media aggregator program (like http://embedsocial.com). Please review UComm’s social media team communicators Tools and templates.
Twitter feeds will not display results if the site visitor is logged out or if the site visitor has exceeded their tweet limit.

Tips and tricks with embed codes

Same content, multiple places

You can also create an embeddable with your own content. Since an embeddable can be used multiple places on a site, this allows you to display the same content in multiple places. If the content changes, you can edit the embeddable, and it will update everywhere it is used on the site.

Navigate to All Content > All Media > Add Media > Embeddables.
In the Embed Code box add the HTML for your content. It should be HTML code that would work anywhere on the site.

<a class="su-button" href="https://sites.stanford.edu">Stanford Web Services</a>
Enter a name that describes the content, for example, “SWS Button”
Leave the oEmbed URL empty.
Click Save.
You can now use that content on any page with a text area.

Here's an example of an embeddable that uses the HTML listed above: