How to create a video story

How to create a Video Story

Web Council // April 6, 2023
Tiffany Sevareid and Teri Shelton // Front end developers
Web Strategy Team // University Marketing and Communications

Follow along to learn all the details of video story creation using the Storytelling Modules plugin.聽

Hero video

REQUIRED: MP4 video for background
REQUIRED: poster image
Recommended: Link to popup (modal) video, if there is a longer video
Recommended: Mobile image (portrait orientation)
Decide on settings
- Header and intro text styles
- Header height – full or half height
- Overlay?

General technical considerations for video in STM

Video quality
Video size (file and )
<20MB for uploaded video into media library if we host. YMMV. Keep in mind you might have a fast internet connection, but others don鈥檛, especially on mobile!
Best way to compress is during export. If that’s not available, use a , but make sure the quality stays high

Flexible media block with background video + text overlay.

This video is subtle and slow, which makes it good for a background video. Optional: text overlay. Required: the pause button, and a poster image.

Ode to a library

by AI Poetry generator

My library, you inspire me to write.
I love the way you enrich and invite,
Invading my mind day and through the night,
Always dreaming about the calm moonlight.

Accessibility best practices

Captions 鈥� we recommend YouTube for easy captions 鈥� or you must provide transcript. Best practice is to always provide both.
Pause button is required
Auto play off strongly recommended
Use accessible videos 鈥� consider motion and flashing (avoid causing seizures) 鈥� spec is to avoid anything that flashes more than 3 times in any one second period. Use to test. Note: This is a Windows only tool.

Resources

Visit the Accessible Technology site, specifically the videos section, for more information.
Watch Video Accessibility Webinar from ATS.
Watch the W3C WAI 鈥溾€�

The two videos linked above are also placed in a columns module below.