You can embed multimedia and other kinds of content from external websites, like YouTube, Vimeo and SoundCloud.
Before you begin, please be sure to see optimization and best practices for multimedia.
On this page:
In the Rich Text Editor, Body field
There are two buttons for inserting media: Hover over the button for a tool tip.
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. However, it is not necessary. Except if you are creating content in Layout Builder and want to insert the video in the Content Block type, Flex Content Area or Promo Unit. In the form fields to create these block types you may click the “Add Media” button to select the video from the Media Library.
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.
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.