There are two types of video you can add to a Shorthand story: foreground and background video.
By default, background video is muted and plays in a loop. Background video allows for content (text and/or other media) to be placed over the video, and can be added to these section types:
Title section - full screen
Text Over Media section - full screen
Reveal section - full screen
Grid section section - full screen, behind the grid items (this is a less frequently used option)
Media Gallery section - individual media gallery item video are considered background, but they don't allow content to be placed over the video (this is a less frequently used option)
You may choose to show the same or different videos on wide screens (such as typical desktop or laptop screens) and tall screens (such as phones in portrait mode).
Requirements:
1920 x 1080px for landscape format video and 1080 x 1920px for 'portrait' format video. These sizes are sufficient for a clear image. Smaller sizes of a similar aspect ratio may be used, but will likely appear less clear,
100mb MAX (much smaller if possible),
Muted - (we recommend you remove sound in editing to reduce file size, as Shorthand will automatically mute any audio present in background video),
Fallback image. When you upload a video, we automatically generate a fallback image for it from the first frame of the video. This image may show for some users before the video is fully loaded or if their browser doesn't support video. You can replace the generated still image with one of your own (a jpg image with the same aspect ratio as your video). If you do upload a custom fallback image and then decide that the auto-generated one was better, click the "REGENERATE" button above the image and it will again be replaced with a frame from your video.
Accessibility and play/pause controls for background video
By default, Background video in Shorthand stories plays automatically when its section is in view, and the video is presented without controls to stop or restart it. The Shorthand editor provides the ability to add a combined play/pause button overlayed on each background video in a story.
If added, readers can click any of these pause buttons in order to stop all instances of background videos playing. If background video playing in the story has been paused, clicking any of the background video play buttons will enable all background videos to play automatically again when in view.
Enabling this setting makes background videos compliant with WCAG 2.0 AA standards.
Add the play/pause button for background video through the 'SETTINGS' tab in the story editor, as below:
In addition to the play/pause toggle, playback of any background videos will be automatically paused when the reader's "prefers-reduced-motion" accessibility setting is active on their device. This setting is set at the operating system level of the reader's computer, rather than through any Shorthand options, and it's often activated by users with motion sickness disorders. If the prefers-reduced-motion setting is active at the same time as the play/pause toggle, the user will be able to play the video if they wish, while if the play/pause toggle is off, the users will not be able to play the video.
Additional tips:
If also adding text over the section, ensure the video is prepared with a text area in mind, or consider adding a coloured overlay in Shorthand in order that there is enough contrast between the text and video,
The background video automatically loops – consider how to ensure a smooth transition between the end and start of your video,
As background videos are muted it is recommended you remove any audio before encoding as this will reduce file size,
For browsers or devices that do not support uninitiated background video (such as iOS and Android) the fallback image will be displayed,
1280x720px is recommended as it provides a good balance between file size and quality, with 1920x1080 the maximum we suggest. Larger videos can seriously affect page performance and as background videos automatically play, the user will be unable to stop them.