UT Shield

College of Fine Arts Drupal Instruction

University of Texas At Austin

Multimedia and Embeddable Content

YouTube and Vimeo can be used in Layout Builder pages in a Custom Block type, such as Flex Content Area or Promo Unit. Additional options, such as SoundCloud, may also be used in a Basic Block or Body field using the Rich Text Editor buttons:

screen shot of the two buttons that can be used to insert multimedia. Hover over the button for a tool tip.

The button with the tool tip, “Insert Media” button will add media, including images, that are in the Media Library, which can be reached from the “Media: Documents, Images, Video (external)” link on the Dashboard. You can store frequently used videos from YouTube or Vimeo in your Library for your convenience. However, it is not necessary unless you are creating content in Layout Builder and want to insert the video in a Custom Block type, such as Flex Content Area or Promo Unit where you will click the “Add Media” button to select the video.

The “URL Embed” button, which is only available in a Basic Block or Body field using the Rich Text Editor buttons, allows you to insert a URL from YouTube, Vimeo, SoundCloud, and many other sources.

Other types of media may be possible with the web team’s assistance.

On this page:

Requirements

The content will be inserted as an iFrame. If inserted correctly, YouTube and Vimeo should be reliable, usable and accessible. Some other embeddable content may not, and could result in ADA compliance issues, so proceed with caution.

All multimedia should be captioned with text transcription and audio description. If no captions are available then there must be a transcript and explanation.

The iFrames must include a descriptive title attribute value. Review, http://webaim.org/techniques/frames/.

The media player buttons used to interact (push play and pause, etc.) with the media, must be accessible.

To make it responsive to the window size, our website should add the following classes:

    • add class="responsive-video__embed" to the <iframe> tag and
    • add div around the iframe with the class <div class="responsive-video">

Source Code

After inserting the media in the editor, you may see something like the following in the Source editor:

<drupal-url data-embed-url=”https://www.youtube.com/watch?v=abc” data-url-provider=”YouTube”>&nbsp;</drupal-url>

If you review the source code in the browser you will see something like:

<div class="responsive-video">
<iframe title="Description of video" class="responsive-video__embed" width="560" height="315" src="//www.youtube-nocookie.com/embed/abc" frameborder="0" allowfullscreen></iframe>
</div>

Specific to SoundCloud

The HTML5 player is the most accessible option. It’s less visually cluttered and you have better control over contrast issues.

Contrast:

  • Of the available play/pause button colors: #2c4149 is the only one that passes with the background color: #f5f5f5
  • You can add a color to the button, but you have to check check the contrast against the background color: #f5f5f5
    • The button color just has to pass AA for normal, large and graphical objects.
    • Warning: standard burnt orange: #cc5500 and the web accessible burnt-er orange: #bf5700 do not pass color contrast against #f5f5f5

Title Attribute: SoundCloud iFrames don’t automatically have a title attribute, so it needs to be added. The instructions for adding an iFrame title can be found here.

Best Practice & Courtesy

  • Do not set multimedia to auto play.
  • Provide alternate access to the media such as a direct link to the content on YouTube, SoundCloud or other site. Access may be hindered by any number of issues someone may have so the direct link provides an alternate option, which may play better for one reason or another.
  • You are also encouraged to include your email address with an invitation to contact you if for any reason the visitor is unable to access the media.

Updates

Technology, browsers, multimedia and embed codes are constantly changing. Review pages with multimedia frequently and be aware of changes in the cloud services.

Test & Evaluate

Because this content is so “shifty,” we highly recommend running these pages through the recommended tests and evaluations.

Learn More

For more specific details about the requirements please see the WebAIM site and for solution ideas see the DIAGRAM (Digital Image and Graphic Resources for Accessible Materials) Center.

×