HTML5 Video

A video about using Duo for 2-step verification

Embed an HTML5 video

The HTML5 video feature lets you add a video uploaded to the WCMS to your webpage. The Web Framework team recommends uploading videos to the videos folder on your site.

Embedded videos are required by IU policy to have alternatives like transcripts, captions, and audio descriptions to make them accessible to more people. See the decision tree on the IU KB document Make video and audio accessible for details on what is required for accessibility.

Steps to embed a video


Step 1

While editing a page, expand Section > Chunk. In the Type dropdown, choose Video.

A screenshot of the WCMS video chunk.


Step 2

Under Section > Chunk > Details, select the Position. The video player can be positioned on the page in four ways: left, right, full, and breakout.

A screenshot of the WCMS video chunk.


Step 3

Complete the input fields and upload the necessary files. See the Input Fields section on this page for descriptions of each field.

A screenshot of the WCMS video chunk.A screenshot of the WCMS video chunk.


Step 4

Submit to save changes.

A screenshot of the WCMS video chunk.


Step 5

Confirm that updates to the page are working as expected by publishing to your test/development site (Sitehost-test).


Step 6

Once confirmed, publish the page to your live/production site (Sitehost).

Input Fields

Position
The video player can be positioned on the page in four ways: left, right, full, and breakout. The full position is the width of the column. The breakout position is the width of the page.
Video Type
The video chunk allows for four video types: YouTube, Vimeo, Kaltura, and HTML5.
Heading Level
Able Player injects an off-screen HTML heading “Media Player” at the top of the player so screen reader users can easily find the player. It automatically assigns a heading level one level deeper than the closest parent heading. Use this field to set the heading level manually if Able Player cannot correctly set the heading level based on your page hierarchy; otherwise, do not change this field.
Thumbnail
A thumbnail is a clickable image that represents the content of a video. It serves as a preview image to give viewers a visual clue about what the video entails before they click to watch it. It is recommended to upload an image in the WebP format.
MP4-H.264
MP4 (MPEG-4 Part 14) with H.264 (also known as AVC, Advanced Video Coding) is a format for recording, compressing, and distributing digital video.
WebM
WebM is a video format specifically designed for the web and is especially useful when the video consumer has low bandwidth.
MP4-H.264 (described version)
A described version of a video consists of an audio description. It is an additional narration track intended for blind and visually impaired video consumers. Learn more about audio descriptions on the IU KB document Make video and audio accessible.
WebM (described version)
A described version of a video can also be uploaded in the WebM format.
Closed Captions (VTT file)
Captions are text overlays that display the dialogue or narration occurring in the video, as well as relevant sounds that might be important for understanding the content. You must provide captions for all live videos and most prerecorded videos. Closed Captions must be in the VTT file format. For more information on creating a VTT file, visit the World Wide Web Consortium website.
Audio description (VTT file)
Upload and attach a VTT (Video Text Track) file. A VTT file provides closed captions and subtitles for video content. For more information on creating a VTT file, visit the World Wide Web Consortium website.
You must provide an audio description for your videos if the visual information is not included in the audio. Please refer to the IU KB document "Make video and audio accessible" for more information.
Caption
Captions are text overlays that display the dialogue or narration occurring in the video and relevant sounds that might be important for understanding the content. You must provide captions for all live videos and most prerecorded videos. Your videos if the visual information is not included in the audio. Please refer to the IU KB document "Make video and audio accessible" for more information.
Transcript
Transcripts let everyone access a text version of the video. Transcripts are also important for search engines, which can index the transcript, improving search engine optimization (SEO).