Skip to main content Skip to secondary navigation

Embeddable Media

Main content start

Stanford Sites supports the ability to add embeddable media such as Facebook or Instagram embeds.

For supported embeddable media, site managers have the ability to add and modify the oEmbed codes. For embeddable media not supported, site managers can request their addition through our Stanford Web Services ServiceNow form, noting the related embed code.

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

Accessibility of embedded content #

Not all embeds are fully accessible. Because that's third party content over which we have no control, if there are accessibility issues, you must provide an alternative approach to accessing the content. For assistance with making content accessible, contact Office of Digital Accessibility.

Learn more about your responsibility as a site owner

Single sign-on

Important Note: Stanford does not support single sign-on (SSO) through an iFrame. This change is being made University-wide for security purposes to limit Cross-Site Scripting and Cross-Site Request Forgery vulnerabilities and is an industry-wide standard. We suggest sending users to the desired content by linking directly to the secured page instead of using iFrames.

Learn more from the Embeddable Content Policy

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.

Adding oEmbed media 

  1. 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:
    Adding embed code in Drupal
  2. Enter a name for your embedded media in the corresponding text field.
  3. Enter the your code in the corresponding Embed Code field.
  4. 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

oEmbed and Twitter

The oEmbed feature only allows embedding of a single tweet. If you would like to embed a Twitter feed, please submit a Help request and include the Twitter embed code for the Twitter feed you want to embed and Stanford Web Services will add the embed to your site's media library.

Embed codes

An embed code is code that is generated by a third-party website such as YouTube or Twitter, 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.

Important: Embed codes can introduce security vulnerabilities. Because of this, permission to add embed codes is limited by role.

Adding embed codes

  1. On the website of the desired service, copy the embed code. 
  2. Returning back to your Stanford Site, from your site’s admin menu navigate to All Content > All Media > Add Media > Embeddables.
  3. Paste the code in the Embed Code box.
  4. Enter a name for the widget that describes the content, for example, “BeWell Events Localist Widget.”
  5. Leave the oEmbed URL empty.
  6. 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

Tips and tricks with embed codes 

Embed same content, multiple places

When creating an embeddable you typically use code from a third party service. It is also possible create an embeddable of a button or a link. Since an embeddable can be used multiple places on a site, this allows you to display the same button or link (or other content for that matter), in multiple places. 

Creating an embeddable button
  1. Navigate to All Content > All Media > Add Media > Embeddables.
  2. In the Embed Code box add the HTML for your button:

    <a class="su-button" href="https://sites.stanford.edu">Stanford Web Services</a>
     
  3. Enter a name that describes the content, for example, “SWS Button”
  4. Leave the oEmbed URL empty.
  5. Click Save.

Here's an example of an embeddable button:

If you're creating an embeddable button or link for someone without edit permissions, consider using a URL that has a destination that can be edited. For example, if you're part of a workgroup, you can use a Stanford vanity URL. If the link destination changes, the new destination can be changed in the Vanity URL Tool.

 

Troubleshooting #

  • If your embed is not displaying as expected, try logging out. Some embeddables render only for anonymous users.
  • If you're unable to save the URL in the form, make sure there are no extra characters such as spaces at the end of the URL.
  • 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.