Embeddable Media
Stanford Sites offers the ability to add embeddable media such as maps, social media feeds, forms, and data visualizations.
Your responsibility as a site editor
Embeddable media can introduce risks to your site's accessibility, maintainability, and security.
Learn about our policy on embeddable content
There are three methods for adding embeddable media to your Media Library. Once added, they can be used in any Text Area paragraph or in any Body field.
- Method 1 - You can add some common embeddable media on your own
- Method 2 - You can add some common oEmbeds. This is not recommended as this feature is slated for retirement.
- Method 3 - You can submit an embeddable source that is not on the supported list for review by SWS
Please note that Videos and Google Forms do not need to be added using these methods. Stanford Sites offers direct integrations for YouTube, Vimeo, and Google Forms.
Method 1: add approved 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.
The following embed codes are allowed via this method:
- Sharepoint Document iFrames
- Airtable iFrames
- Smartsheet iFrames
- Google iFrames
- Outlook Calendar iFrames
- Localist Event Widgets
How to add approved embed codes
- On the website of the desired service, copy the entire embed code.
- Return 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 field.
- Edit the iFrame to add a title attribute if it does not already have one. (i.e.
title="title of your embed") - Enter a name for the Embeddable that describes the content, for example, “BeWell Events Localist Widget.”
- Leave the oEmbed URL empty.
- Click Save.
Method 2: add a valid oEmbed URL
oEmbed is a format that allows you to embed content using a URL provided by the product or service. This method will no longer be available in a future release and therefore is not recommended.
Supported oEmbeds
The following oEmbed services have been configured for use on Stanford Sites.
- ArcGIS StoryMaps
- CircuitLab
- Dailymotion
- Flickr
- Getty Images
- Issuu
- Livestream
- MathEmbed
- SlideShare
- SoundCloud
- Spotify
- Stanford Digital Repository (SDR)
How to add an oEmbed URL
In the administrative toolbar go to All Content > All Media > Add media > Add Embeddable.
- Enter a name for your embedded media in the Name field.
- Enter the oEmbed URL in the oEmbed URL field.
- Click Save.
Method 3: submit an embed code for review
Stanford Web Services developers will review your submitted embeddable codes to ensure the stability and security of our platform. If the embeddable passes review, we will add it to your media library.
Delete an embeddable
If you delete an embeddable directly from the Media Library, some embed code remains on any page where that embeddable is used. You will need to go to each page and remove that code. To delete an embeddable from your site:
- Find the embeddable in the Media Library
- Click the pencil icon to edit the embeddable
- From the embeddable edit form, select Usage. This will show the pages where this embeddable used.
- Go to each page listed and delete the embeddable from each page.
- Return to the embeddable edit form, select Delete and follow the directions.
Policies and 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.
- 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.
Accessibility best practices for embeddable media
Most embeddable content is not fully accessible. Learn more about your responsibility as a site owner
- To have your embedded content reviewed for accessibility, contact the Office of Digital Accessibility.
- Avoid anything that autoplays. If something does autoplay, make sure it can be stopped. See Understanding SC 1.4.2: Audio Control (Level A).
- 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.
Ensure iframes have title attributes
The title attribute is required for accessibility and validation of the embed code. The title attribute provides alternative text and makes the 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:
Frequently Asked Questions
Tips, tricks, and troubleshooting for embeddable content.
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. See the section on accessibility to learn more.
If you're unable to save the Embeddable form after adding an oEmbed URL:
- Make sure there are no extra characters such as spaces at the end of the URL
- Make sure the URL is a valid oEmbed URL by consulting the documentation for the provider of the URL.
Embeddable media can make your page slow to load because the embedded resource is large or is not served from a performant source. If this is the case, you may want to find alternatives to embedding content or you may wish to link directly to the content rather than embedding it.
Instagram does not provide a native embed code for an entire feed. To embed an Instagram feed, you will need to use a social media aggregation service. The social media aggregation service will typically provide you with one or more options for displaying your social media content and corresponding embed codes. You can then submit the embed code for review.
Instagram does support embedding a single post, although the options for interacting with or resizing the embed are limited. Learn how to embed a single Instagram post.
Twitter/X has changed their policies around the visibilities of posts based on their business model. Even if you are able to see your feed, be aware that your site visitors may not, depending on their own Twitter/X login and subscription status. We are recommending that you link directly to your Twitter/X feed rather than embedding it on your site. Check out options for linking to your Twitter/X feed in the Local Footer of your site.
No. The Embeddable Code field only accepts a limited set of valid HTML.
Google Calendar is not enabled for faculty and staff as part of the Google Suite of tools. If you are logged into Google with your Stanford.edu address, you will not be able to view an embedded Google Calendar. Stanford students should be able to view the calendar. If Stanford Faculty and Staff are your primary audience, or if your audience is external but may also face similar limitations, you should consider switching to an embedded Outlook calendar.
Yes! Check out our how-to guide to learn more about how to use an Embeddable to create a reusable element across multiple pages.
No. Stanford security policy does not allow Stanford login through an iFrame or other embedded method. We recommend you link directly to the resource rather than embedding the protected content on your site.
This guidance also applies on Stanford Sites Intranet. Some logged in users may be able to see the embeddable without logging in, but it is likely many won't.
