Stanford
Stanford Sites User Guide

Embeddable Media

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

There are three methods for adding embeddables:

Videos and Google Forms do not need to be added using the Embeddables feature. We have more direct methods for getting that content onto your webpage.

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. 

Before adding embeddable media, please familiarize yourself with the risks listed in the Embeddable Content Policy. 

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

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

  1. On the website of the desired service, copy the entire 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. If your embed code does not include a "title" attribute, you will need to add one.
  5. Enter a name for the widget that describes the content, for example, “BeWell Events Localist Widget.”
  6. Leave the oEmbed URL empty.
  7. Click Save.

Sample embed code with title attribute

<iframe class="airtable-embed" src="https://airtable.com/embed/shrqG5ttCce8NJUbA?backgroundColor=cyan&viewControls=on" title="Title of Airtable" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

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.

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 URL of the media to embed in the corresponding oEmbed URL 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.

Method 3: Submit for Review

We review embeddables 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.

 

Using 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. 

     

    Troubleshooting #

    • 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.
    • 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 Oembed 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. 
    • HTML elements should all be lower case letters. 

    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.