Embed a YouTube video in the Related Content Container.
Last reviewed: January 3, 2024
This component must be placed within a Related Content Container.
This component only works for YouTube videos.
Add the component to an existing Related Content Container.
While there appear to be two associated sections, there is only one component, with two tabs.
Click the wrench icon to 'configure' these settings.
To change the 'Video' text, double-click inside the upper component area.
Headline: Add an optional descriptive title. By default, 'Video' is displayed. This title will be in bold on the published page and appear above the image.
Subheading: Add an optional secondary heading that will appear below the image.
Video URL: Enter the ID or URL of a YouTube video. (This component ONLY works for YouTube videos.)
Alt text: Videos are represented with a thumbnail image. Alt text by state law to write a functional description of your video thumbnail in this field.
The screen reader will supply "image of". The user will already be provided with the video controls. For a video entitled "abc", consider [image of] "YouTube video entitled abc." or "watch abc.". Always end the Alt Text with a period so the screen reader knows to stop reading. (See webaim.org for tips on writing alt text.)
On the Related Video tab, set the Headline and Subheading to display alongside the video thumbnail.
Also on the Related Video tab, set the Video URL.
On the Text tab, enter text to appear under the video thumbnail.
> Consider pulling content from these major university channels
Use this tab to add additional text, such as a caption or description for the video.
Enter your desired text. Apply any formatting or links using the Rich Text Editor.
For hyperlinks, the option is provided to open in new page. When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website. If the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)
YouTube is cracking down on copyrighted materials and is removing videos and even shutting down channels that use music (or other assets) without clear authorization from the copyright owner.
This is affecting virtually all videos on YouTube. Many UB channels and videos, including the most highly trafficked, are at risk. Channel owners can dispute claims if they believe copyright infringement claims are invalid.
It is important that all UB communicators who use YouTube videos take immediate action and in future act with care to avoid losing their channel or having their videos blocked by copyright owners.
All videos on UBCMS websites must have synchronized captions. An additional transcript is optional, but if provided, should be closely associated with the video player. Captions (and transcripts) support those who cannot see or hear your video.
Best practice: captions are most easily added using the automated tools on YouTube, even if the final placement is not in that platform.
The user should control carousels, slideshows and video, so they are not confused by unexpected behavior and to provide enough time for them to process each segment.
Best practice:
These recommendations are supported by default in UBCMS carousel, slideshow and video components. Please comply with this best practice if you embed external video or animations.
Alternative text ('alt text') is a short, written description that describes the appearance, content and/or function of an image on a webpage. Adding alt text is a best practice for all your UBCMS images and is required for accessibility so users will understand what they are not seeing.
Purely decorative images (that do not convey content or have a function on the page) can instead be set as "This image does not require Alt text" in some components, which also nullifies alt text that was previously entered.
Alt text is required in these contexts:
* When the image is a link, starts an animation or video, or is a navigational element, alt text should indicate its function, not the image's content (i.e., "watch video ABC" and not "screenshot from video ABC"). Screen readers will treat this image as a standard link.
Alt text can be added to images in Assets. This is required for images that are then used in the Photo Gallery component, while it can also be used as an alternate source for Alt text in some components (e.g. the Photo setting 'Get Alt text from Assets').
Best practice:
Text Over Photo provides an accessible alternative to using images that have embedded text.
> Learn more about the Text Over Photo component.
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: