• Home
  • Quick Start
  • Get Started
  • Advanced
  • General Web Instruction
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
UT Shield

College of Fine Arts Drupal Instruction

College of Fine Arts Drupal Instructions

University of Texas At Austin

  • Home
  • Quick Start
    • Editor Access, Workflow, Approvals & Roles
  • Get Started
    • The Dashboard
    • Content Types and Layout
      • Categories, Taxonomy and Terms
      • Landing Pages
      • Layout Builder Sections & Blocks
        • Listing Blocks
        • Reusable Blocks
        • Main Navigation Block
        • Quick Links Block
        • Featured Content Blocks
        • Ambient Video Block
      • Announcement Banner
      • Events
        • University Calendar Instructions
        • Link to Pre-Filtered Aggregated List
    • Create, Publish, Edit, Unpublish, Delete, Archive
      • Create Content
      • Edit Existing Content
      • Publishing Content
      • Delete, Unpublish, Archive
    • Menus, Paths & Links
      • Editing Menus
      • URL Path Address
      • Create a Link
        • Linking to Another Spot on the Page
        • Link to Pre-Filtered Aggregated List
        • Non-Visible Link Context and Visually Hidden
      • Secondary Menu
      • Duplicate Menu Label, URL or Title Issues
    • Rich Text Editor
      • Create a Link
        • Linking to Another Spot on the Page
        • Link to Pre-Filtered Aggregated List
        • Non-Visible Link Context and Visually Hidden
      • Insert an Image
        • Left & Right Image Alignment
      • Insert a Document
      • Multimedia and Embeddable Content
      • Adding Hide/Reveal Elements
      • Tabular Data in Tables
      • Responsive Word Wrapping & Hyphenation
      • HTML Source
        • Hide on Desktop or Hide on Mobile
    • Media (Images, Documents & Videos) Management
      • Insert an Image
      • Insert a Document
      • Multimedia and Embeddable Content
  • Advanced
    • Infrastructure
      • Site Search
      • Caching
      • Community Factors
      • Database vs. Code
      • Test Site
      • Release Cycles
    • Contracting Drupal Developers
  • General Web Instruction

Multimedia and Embeddable Content

You can embed multimedia and other kinds of content from external websites, like YouTube, Vimeo, Spotify and SoundCloud.

On this page:

  • Best Practices for Multimedia and Embeddable Content in Drupal
  • Add Multimedia or Other Embeddable Content
  • Make the Embedded Content Responsive
  • Other Requirements
    • Specific to SoundCloud

Best Practices for Multimedia and Embeddable Content in Drupal

All the same general best practices for the multimedia and accessibility requirements apply to the Drupal Websites.

On some of the sites an Ambient Video Block type is available. It is designed for ambient content and will not play on mobile.

Add Multimedia or Other Embeddable Content

There are two buttons for inserting media:screen shot of the two buttons that can be used to insert multimedia. Hover over the button for a tool tip. Enter the URL for the embed.

For Vimeo and YouTube only:

The button with the tool tip, “Insert Media” button will allow you to add media, including images and documents, that are in the Media Library.

You can store links to frequently used videos from YouTube or Vimeo in your Library for your convenience Note this button only works fo Vimeo and YouTube. However, it is not necessary. Except if you are creating content in Layout Builder and want to insert the video in the Flex Content Area or Promo Unit Content Block types. In the form fields to create these block types you may click the “Add Media” button to select the video from the Media Library.

For many different types of embeddable content, including Vimeo and YouTube:

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, Spotify and many other sources. Note that if you insert Vimeo or YouTube content using this button, it won’t be included in the Media Library.

Other types of media:

May be possible with the web team’s assistance.

Make it Responsive!

Highly Recommended!
To make the embedded media responsive to the window size
, 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>

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

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.

Primary Sidebar

Open Office / Co-Working Sessions

Second Monday of the month:

11 a.m. – 12:30 p.m.

Fourth Thursday of the month:

2 p.m. – 3:30 p.m.

Email us for the Zoom link.

College of Fine Arts Web Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu

UT Home | Emergency Information | Site Policies | Web Accessibility | Web Privacy | Adobe Reader

© The University of Texas at Austin 2025