Video (YouTube) Component

Showcases the Video component which embeds YouTube media. [5:17]

Two options for completing this exercise...
  1. Request a Self-Paced account on the Training Server. Then just follow the instructions as is.
  2. If you already have access to the main Author Server, adapt the instructions to fit your own site.

Scope

We created this component to display YouTube videos since YouTube is the most searched platform in the world after Google. It is also very easy to use and to publish content there.

Any videos in UB websites must have close captioning or a transcript. There are captioning tools built into YouTube but make sure your video has captioning, and that the captioning has been edited to fix any typos (e.g. "you be" instead of "UB).

Your video will display a static thumbnail image on your Web page so this component requires Alt Text.

Finally, YouTube aggressively monitors for copyright, so please don’t publish any videos to YouTube that are not permitted for UB’s use.

Instructions

1. Log into the UBCMS.

2. Open the Sites Console and navigate to your site; e.g. Sites + Self-Paced Training + {your site}.

3. Choose any page on your site or create a new page.

4. Select that page and click Open in the Commands Menu that now appears.

5. To add a component...

  • Click the Toggle Side Panel button in the upper left of the window.
  • Switch to the Component Browser.
  • Components are listed alphabetically. Or type part of its title and click Enter.
  • Find your desired component and drag it onto the page.

6. Before you go further, you will need to choose a video.

7. Open YouTube in a separate tab.

8. Select a safe video then copy the video's identifier. You can use any of these versions (or copy one of the examples):

  • The long URL that is displayed in the browser location bar; e.g. http://www.youtube.com/watch?v=VVNJbqnijc8
  • The short URL that is displayed by clicking YouTube’s Share tool; e.g. https://youtu.be/VVNJbqnijc8
  • The special alphanumeric ID; e.g. VVNJbqnijc8

9. Now select the component, then click the wrench icon to Configure it. These two settings are required:

  • YouTube Video Link - Add the identifier for your video as described above
  • Alt text (Required) *

10. Click the checkmark icon when you are done. (The 'X' cancels your changes.)

* Alt Text stands for “Alternative Text”, which is what someone will hear to describe the thumbnail image if they cannot see it, perhaps because they have a visual disability and is using screen reader software. Alt Text is required by state and federal policy. When a screen reader encounters an image, it will read out “image of…”, so we suggest “YouTube video entitled" plus the title of your video.

To watch the video, you have to switch to Preview Mode. Click that button up in the upper right of the page. Now play the video (watch the volume) and notice it starts thirty seconds in. Now click back to Edit Mode when you are ready to edit your page again.

Note: as part of the settings, you can specify a starting place in the video, such as “30s” for thirty seconds. Try entering that to see how it works. There are also additional YouTube settings but we recommend you leave them as is for accessibility reasons.  

Additional Reading