Skip to main content

Foreground video

There are two general types of video you can add to a Shorthand story: foreground and background video. Foreground video can be added to the following locations:

  • Inline within a text block

  • Media section - full screen

  • Grid section - inside grid cards

Foreground video allow sound, video controls, and by default they must be played by the reader but they can also be configured to autoplay and loop. On the other hand, background video have neither sound nor controls and they are always set to autoplay on loop (however they can be paused by the reader if a pause toggle is enabled by the story editor from the story settings).

Adding foreground videos

In the edit media panel you can upload a foreground video from the Video tab, or use a video hosted with a third-party service like YouTube by adding the URL from the Rich Embed tab. Each of these options allow captions to be added to the video.

Edit media button

Edit media button

Upload video form

Upload video form

Rich Embed form

Rich Embed form

If your plan allows you to add custom code, you can also add third-party videos by adding embed codes via custom HTML blocks .

Options and specifications for uploaded videos

If you choose to upload a video, you have the option of adding a single video that will be used on both large screens (those wider than 900px) and small screens (narrower than 900px, such as vertical phones) or providing different video files: one for large screens, and one for small screens.

There are a number of reasons why you may wish to supply different videos for the device sizes: such as to format subtitles appropriately for legibility or to more closely match the video format to the user's device size. Foreground video orientation (landscape or portrait) does not need to match the device orientation. You could, for instance, show the same or different 'landscape' format video on both large and small screens.

If you choose to upload only a single video, it will be shown on both large and small screens. It is not necessary to provide videos for each device.

Video player settings

You can configure how uploaded foreground video look and behave from the video player settings toggles, which are accessed from the menu over the top of the video in the body of the story editor.

  • Set to autoplay - Defaults to off. When enabled, the video will play automatically, and if the video includes sound it will be muted until the user changes it.

  • Loop video - Defaults to off. When enabled, the video restarts automatically once it ends. Often used with autoplay enabled, but it can be used independently to effectively make the video autoplay after the user has manually played it.

  • Show video controls - Defaults to on. When enabled, the video player will show common video controls, and you may customise which of the following controls are shown. When disabled, the video will be permanently muted and all video controls will be hidden, although a user can still pause the video by selecting it.

    • Show volume controls - Defaults to on. Shows volume slider and mute controls. If disabled, a mute control may still show within the 3 dot menu.

    • Show video timeline - Defaults to on. Shows the video timeline so readers can see their progress and skip to different parts of the video. This may be automatically hidden at smaller video sizes.

    • Show restart button - Defaults to on. Allows the reader to quickly restart the video. If autoplay is enabled and the video has sound, it will restart the video with sound on, even though it starts muted.

      Note: In addition to the configurable video player control options above, there are other controls like fullscreen, playback speed, picture-in-picture, airplay/cast that may automatically be included when Show video controls is enabled. Many of these additional controls will only be accessible from the 3 dot menu.

Video file requirements:

  • In text blocks (where the video fits within a column of text): 900 x 507px is sufficient,

  • In Media sections (where the video is the dominant feature): 1920 x 1080px for 'landscape' format video and 900 x 507px for 'portrait' format video is sufficient for a clear picture. Smaller sizes of the same aspect ratio will work, but may appear less clear,

  • Supported video type,

  • 100mb MAX (much smaller if possible), and

  • Poster image - must be JPG (same dimensions as the video).

Optimal video sizes (for users viewing your story on a typical 3G internet connection, estimated at 3.5Mbps download speed) see our video encoding guidlines

Did this answer your question?