Skip to main content

Official Website

of the Commonwealth of Pennsylvania

The .gov means its official.

Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
User Guide

Media Player Component

The Media Player component allows either a video or an audio file to be embedded and displayed on a page. Video and audio can provide supplemental information to a page.

 

YouTube and Vimeo video embeds, as well as MP3 files, are currently supported by the Media Player.

Overview

Component name: Media 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 Media Player component to the page

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

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

Editing the Media Player component

1. With the edit wrench, open the component.

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

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. Media Source dropdown: Select YouTube, Vimeo, or Audio.

If YouTube or Vimeo are selected, follow step 5.

If Audio is selected, follow step 6.

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. Audio File field: Add the audio file link. It should be stored in Assets.

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

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

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

Imagine capture of video on page with its cover, title, description, and transcript button Figure A: The Media Player with a YouTube video.
Media Player showing an audio file called "Driver's License Handbook: Chapter 1," with transcript and standard audio controls. Figure B: The Media Player with an audio file.

Adding a transcript page

Transcript pages should be created for any audio files, or 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/audio*.

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

3. On the Media Player component, reference the transcript page in the Media 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 Media 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/audio source. These controls are not authorable.

3. Residents can play/pause a video by clicking anywhere on the Media Player. Neither videos nor audio will start automatically, and they do not loop when complete.