New Guide!

Welcome to the Stanford Sites 4.0 User Guide. 

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.

Best practices

  • iFrame embeddables are the most common, but they have significant accessibility issues. If there is an oEmbed option available, we recommend using oEmbed over an iFrame whenever possible.

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

  • 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 external service. Any content found to be in violation of this policy will be removed.

  • Anything that should be deployed sitewide, like user tracking codes, analytics tools, chatbots should not be added as embeddables. Learn more about best practiced for managing these in our section on Marketing and Analytics.

Learn more from the Embeddable Content Policy

    How to add embeddables

    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

    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:
      Screenshot illustrating Embeddable Media
    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. 

    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.

    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. 
    • I want to resize my Instagram embed, is that possible?

    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.

    1. Navigate to All Content > All Media > Add Media > Embeddables.
    2. 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>
       
    3. Enter a name that describes the content, for example, “SWS Button”
    4. Leave the oEmbed URL empty.
    5. Click Save.
    6. 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: