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
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:
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">
- add
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”> </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.