User Guide

Video Player Component

The Video Player component allows a video to be embedded and displayed on a page. A video can provide supplemental information to a page.

 

YouTube and Vimeo video embeds are currently supported by the Video Player.

Overview

Component name: Video Player

Authors who can use component: any

Templates/page types that can use component: all

Required or optional: optional

Sample Video Player on a page.

Authoring Fields

Adding the Video Player component to the page

1. Once on the desired page in Edit mode, add the Video Player by doing the following:

a. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Video Player” in the search bar, or scroll to the Video Player in the list. Double click to add to page.

b. Option 2- on the left hand rail, navigate to the Components tab. Type “Video Player” in the search bar, or scroll to the Video Player in the list. Double click to add to page.

Editing the Video Player component

1. With the edit wrench, open the component.

Video player component featuring wrench icon

2. Title field: Add a title to display above the video.

a. The recommended character limit for a title is 65 characters.

3. Title heading level dropdown: Select the H-level of the title. Title can be H2 – H6.

4. Video Source dropdown: Select YouTube or Vimeo depending on the video source.

5.  Video ID field: Add the video ID, from either YouTube or Vimeo.

a. YouTube: The video ID is located in the URL, after “v=”. It will be a string of letters/numbers.

b. Vimeo: The video ID is located in the URL, after the “/”. It will be a string of letters/numbers.

6. Video Description field: Add a description to display below the video and provide more context to residents.

a. The recommended character limit for a description is 200 characters.

7. Video Transcript Link field: If a transcript page was created in AEM for the video, link to it here. The link label on the Video Player will be “Transcript.” Upon click, residents will be led to the transcript page. See “Adding a transcript page” section for more information. Video Transcript Link is an optional field.

Imagine capture of video on page with its cover, title, description, and transcript button

Adding a transcript page

Transcript pages should be created for any videos that do not already have a transcript provided through YouTube or Vimeo. Note that closed captions do not replace a transcript.

1. Create a new page, using either the PA.gov Content Page or a specific Agency Content Page template as needed. Title the page “Transcript: *name of video*.

2. On the new page, use the Text component to type out the transcript of the video.

3. On the Video Player component, reference the transcript page in the Video Transcript Link field.

Transcript page with title and layout of transcript

Accessibility

1. Reference the following articles on making videos more accessible:

a. Web Accessibility Initiative: Transcripts

b. Web Accessibility Initiative: Description of Visual Information

c. Web Accessibility Initiative: Audio Content and Video Content

2. Transcripts are recommended whenever possible.

a. Some videos, primarily on Vimeo, may already have a timestamped transcript included as part of the source video. In these cases, it is not necessary to create a transcript page on AEM.

 

Other Tips

1. Use the Emulator widget to test Video Player size on different devices.

a. Mobile videos play inline; residents must choose to play in fullscreen.

2. Controls such as volume, fullscreen, closed captions, etc. will appear by default depending on the selected video source. These controls are not authorable.

3. Residents can play/pause the video by clicking anywhere on the Video Player. Videos do not start automatically, and do not loop when complete.