Video
Videos render with a headline, a caption and a credit. There are options available to affect the position and stacking order of the headline, caption and video, as well as the text alignment and visibility of the headline, caption and credit.
Options
value | purpose | required | default |
---|---|---|---|
position |
Supports all standard positions | ||
layout |
Supports all standard layouts | ||
textPosition |
Determines stacking order of video, headline and caption: default , top or split |
default |
|
textAlign |
Align the headline, caption and credit to the left , right or center |
left |
|
hideHeadline |
Suppress rendering of the headline | false |
|
hideCaption |
Suppress rendering of the caption | false |
|
hideCredit |
Suppress rendering of the credit | false |
|
loopingPoster |
URL of a short video clip on the CDN. There is no set length — just use something that catches the eye but is a quick file load. |
Looping poster images
The standard video player displays a static image, or "poster", before the play button is clicked. This feature adds the option to substitute an autoplaying silent video clip instead.
Text position
The main configurable option with videos is text placement, with three choices:
Default | Top | Split |
---|---|---|
Headline and caption below video | Headline and caption above video | Headline above video, caption below |
Example configurations
{assets.67867784353}
position: right-large
hideHeadline: true
hideCaption: true
textPosition: split
{}
{assets.67867784353}
layout: center-large
textPosition: split
loopingPoster: https://www.gannett-cdn.com/usat-storytelling/sandbox/videos/sw-loop.mp4
{}
Video playlists
Video playlists are supported, and will appear with a carousel of related videos underneath a main player. Add them in Presto like you would any other asset.
What about Google AMP and Apple News?
Videos will appear in a conventional video player.
Published examples
- Video with no headline: https://www.greenvilleonline.com/in-depth/news/local/south-carolina/2019/09/29/body-camera-use-sc-police-shootings-is-inconsistent-heres-why/3210213002/
- Video with headline and caption/credit at default: https://www.newsleader.com/in-depth/news/2019/10/29/harriet-tubman-maryland-house-childhood-slavery-brodess-farm-underground-railroad-md/2439872001/
- Live demos: https://lab-microservices.production.gannettdigital.com/lab-microservices/in-depth/demos/#videos
Analytics
Event | Label | Category | Action |
---|---|---|---|
Player / Playlist scrolls into view | in view |
scroll tracking |
video player /video playlist |
Playlist carousel navigation | video playlist {advance/back} |
navigation |
video playlist |