Videograms
Videograms are essentially a mashup of pullquotes with media and audio pullquotes, a.k.a. audiograms. A videogram puts a muted, autoplaying video on the page and displays captions separate from the video — off to the side on desktop and stacked underneath on mobile. Overlaying the video is a mute/unmute button and a play/pause indicator. The video's play state can be toggled by clicking anywhere on the video itself.
Options
| value | purpose | required | default |
|---|---|---|---|
storytellingComponent |
Must be set to videogram |
true |
|
media |
URL of a video clip on the CDN or the Presto id of a video asset. | true |
|
vttSrc |
URL of a .vtt file on the CDN. Required, unless a Presto id is used for media (see below). |
||
layout |
Defaults to center-large or the full width of the window, but also accepts center-well. |
center-large |
|
poster |
URL of an image on the CDN, ideally matching the aspect ratio of the video. | ||
loop |
Determines whether a video starts playing from the beginning again once it has reach its end. | true |
|
posterText |
Text that will load when a video has ended. Requires either a poster value or loop set to false. |
||
posterAttribution |
Attribution for posterText. |
||
textAlign |
Text alignment of captions: left, center or right. |
left |
|
captionSerif |
Determines whether caption is rendered in UnifySans or UnifySerif. | true |
|
attributionSerif |
Determines whether attribution is rendered in UnifySans or UnifySerif. | false |
|
captionItalic |
Determines whether caption is rendered in UnifySans or UnifySerif. | false |
|
attributionItalic |
Determines whether attribution is rendered in UnifySans or UnifySerif. | false |
Sample configuration
{assets.123456}
storytellingComponent: videogram
media: https://www.gannett-cdn.com/indepth-static-assets/uploads/staging/1306793002/5833583d-e184-4b0d-99e7-e495b3888849-oh-dang-720.mp4
vttSrc: https://www.gannett-cdn.com/usat-storytelling/uploads/staging/1306793002/0f4d3866-8934-4d9d-b710-0c9c9c294038-sampletranscript.vtt
poster: https://www.gannett-cdn.com/usat-storytelling/testing/images/brooklyn-nine-nine-poster.jpg
alignHorizontal: left
contentBackgroundColor: #a0522d
{}
Visually-enhanced component config
Videograms inherit a number of configuration options from visually-enhanced elements, notably the supported video formats for media, but also contentBackgroundColor to set a custom color behind the captions, contentHorizontalAlign to swap the left-to-right order of the video and captions, mediaCover to force the video to fill the available space, and credit to display a, well, credit.
WebVTT files
Videograms use the same web-standard file format for Web Video Text Tracks (VTT) that audiograms use. For videos that you upload to the CDN through the in-depth editor, you'll have to create your own file and upload that through the editor, but for videos configured with a Presto id, you can choose to leave the vttSrc option blank, in which case the component will fetch the .vtt file auto-generated when the video is uploaded in Presto. If the auto-generated file has too many mistakes, it's possible to download a copy of it by copying the Presto id into this url: https://videos.gannett-cdn.com/_captions/<PRESTO-ID>.vtt You can then make the necessary edits and upload that file for use with the component.
Poster image and text
If poster is set to the URL of an image on the CDN, the video will play through once, then leave the last caption on the screen and load the poster image. The user can restart it by clicking on the video. For best results, the poster image should match the aspect ratio of the video. To show something other than the last caption, use the posterText and posterAttribution options. Those options can also be used in the absence of a poster image by setting loop to false.
Reader notification
Videograms will autoplay by default, but because of browser autoplay policies, they must be muted. To urge readers to unmute them, we automatically add a notification call to action at the top of the story encouraging them to opt-in to the experience. The noticiation uses the same options as ambient audio.
Analytics
| Event | Label | Category | Action |
|---|---|---|---|
| Play | played |
content |
videogram |
| Pause | paused |
content |
videogram |
| Mute | toggled audio off from <source> |
content |
videogram |
| Unmute | toggled audio on from <source> |
content |
videogram |