Transforming UB’s digital communications.
Video (YouTube) Component
Embed a YouTube video in a custom player.
On this page:
Last reviewed: January 3, 2024
Accessibility
- Images require Alt text.
- Keep the default YouTube settings.
- Let users control animations.
- Videos must have captions.
This component only works for YouTube videos. For other platforms, try an HTML Snippet.
Using This Component
This component has only one tab.
Videos can be displayed singly, using this component, or as a gallery using the Video Gallery component. They can also be given descriptions. The Video Player settings include options for Auto Play, Full Screen Mode, Including Related Videos, Looping, HD Quality, Video Annotations and Pop-up display.
UB Panopto
As an alternative to YouTube, consider UB's recommended video recording software. > embedding Panopto
UB Channels
> Consider pulling content from these major university channels
Technical Restrictions
- The Video Component will only play a YouTube video. Entering a YouTube playlist will result in an error message.
- Restrictions placed on YouTube videos apply. For example, if a video is restricted to only play to a limited audience, on certain sites, or in certain countries, the visitor may not be able to access the video.
Configure - Main Settings
Click the wrench icon to 'configure' these settings.
YouTube Video Tab
The component opened for editing.
YouTube Video Link: Identify your video in one of these three ways:
- The ID that YouTube uses itself to identify a video (e.g. VVNJbqnijc8).
- The long URL seen when the video is viewed on YouTube's site (not embedded on a Web page). You can remove additional characters from the URL — all you need is the http://www.youtube.com/watch?v=VVNJbqnijc8, where VVNJbqnijc8 is the ID for your video.
- The short URL that YouTube generates for its videos in the Share tool (e.g. http://youtu.be/VVNJbqnijc8).
Alt text - Your video is automatically given a thumbnail image with the play button.
- Add a description of the thumbnail image for users who may have difficulty seeing it.
- Alt text is required by New York State policy for images that have a function such as this.
- Blanks or a carriage return are not in compliance and will be blocked.
- See webaim.org for tips on writing alt text.
- Alt text is required by New York State policy for images that have a function such as this.
- 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.
Play in Popup - Not recommended (can be distracting).
Video Player Options - Select any additional features:
- Auto Play: Not recommended (can be distracting).
- Allow Full Screen Mode: Recommended.
- Include Related Videos: Not recommended (undesirable content may be shown).
- Loop: Not recommended (can be distracting).
- Video Annotations: Recommended where available.
Start At - Set an optional starting point partway into the video (e.g. "30s", "20m30s", "3h20m30s").
Copyright and YouTube
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.
Accessibility Concerns
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:
- If the image is a link. *
- If the image is zoomable.
- If the image depicts important information not clearly provided in a caption or nearby text on the page.
- If the image has a function; e.g. for navigation -- 'next slide'. *
- For the static thumbnail images that are generated by Video and Flex Module components.
* 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:
- Screen readers automatically announce "image of...", so you do not need to include the word "image" or "graphic" in your alt text.
- Add a final period so screen readers will pause before reading the rest of the page.
- Be concise (under 150 characters) but include any significant elements to the image, e.g., "student using microscope in a research lab."
- If the image is used for navigation, describe what will happen, e.g. "next page of results".
- If the image is a link to another page, name or describe the target page (e.g., "School of Nursing.") but do not say it is a link -- screen readers indicate that as well. This also applies to zoomable Photos.
- If the image is a link that starts a video (named ABC), consider "YouTube video entitled ABC." or just "watch ABC."
- If the image contains a lot of text (e.g. a chart or table), provide this information in other ways on your page, perhaps as a nearby collapsible container labeled appropriately.
- Alt text should be added whenever images are uploaded into Assets.
Text Over Photo provides an accessible alternative to using images that have embedded text.
> Learn more about the Text Over Photo component.
Known Issues
Additional Reference:
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:
- Do not auto-start video.
- Do not automatically scroll a carousel or slideshow.
- Provide tools that allow users to start, stop and resume animations.
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.
Additional Reference:
Videos that automatically popup, autoplay, or loop can be confusing for some users, and will probably annoy everyone in general. It is always best to let the user decide how to interact with your website.
Video must also have controls to start/stop and replay, which are standard for YouTube, which is why we recommend its use.
Best practice: keep the default settings when using the Video component.
Additional Reference:
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.
Additional Reference:
See an Example
Below is a live example of a YouTube video embedded using this component.
A YouTube video in the Video Component, set to start at 10 seconds.