Service Portal/Widgets

Video carousel (CD)

Allow users the ability to navigate through multiple videos in a visually engaging way.

This widget is only available with the Content Publishing application installed from the ServiceNow Store.

Overview

  • Release version
    Australia
  • Available sinceYokohama
  • A11Y WCAG 2.1 AA

The Video carousel (CD) widget provides a dynamic and engaging way to display a series of videos within a Service Portal. It allows users to browse through a collection of video content using a familiar carousel interface. It offers a compact footprint while maximizing content delivery, enhancing user engagement and information retention.

ServiceNow Docs link
Video carousel (CD) widget documentation

Additional information about the widget

null

When to use

Use the Video carousel (CD) widget when presenting a series of videos, such as product demos, tutorials, or company updates. It's ideal for sharing important information in a visually engaging and sequential way.

When not to use

Avoid using it for individual, standalone videos that don't benefit from a sequential browse experience. Also, do not use it for critical, non-sequential information that requires immediate, singular focus, as users might miss it in a carousel.

Usage

The Video carousel widget is used for portals requiring video content that benefits from a sequential, visually appealing presentation.

Examples:

  • Tutorials: Step-by-step guides that help users learn how to perform specific tasks or use software effectively
  • Product demos: Live or recorded presentations showcasing the features and benefits of a product to potential customers
  • Training materials: Comprehensive resources designed to educate employees or users on processes, tools, or skills necessary for their roles

Anatomy

The Video carousel (CD) widget is composed of the following elements:

  1. Widget title: You can toggle this area on and off as well as customize the text displayed via the platform’s instance options
  2. Play button: When clicked this toggles the carousel to auto-advance to the next slide. The button also changes to display a pause icon
  3. Video player: The component that plays the video when selected, displaying the current video thumbnail
  4. Navigation controls (arrows): Buttons for moving between videos
  5. Pagination dots: Indicators showing the current video's position and allowing direct navigation to other videos. The active dot should be visually distinct.

Instance options

Other options

Field Description
Display heading text Controls the visibility of the widget's main title. When enabled, the widget's configured title will be displayed above the video carousel.
Display bounding box Determines whether a visible border or distinct container is rendered around the entire Video carousel (CD) widget. This option helps to visually delineate the widget's area and separate it from surrounding page content.
Display widget background color Sets a custom background color for the entire Video carousel (CD) widget's container. This allows for visual customization to match page themes or provide specific visual contrast for the video content.
Show empty state When enabled, displays a predefined message or a visual indicator within the widget if no videos are currently configured, found, or available for display based on the widget's content source and filtering.

Usability

The Video carousel (CD) widget is designed to comply with all internationalization and accessibility requirements.

Internationalization

Video carousel internationalization

Accessibility

Learn how to access the actionable elements of the Video carousel (CD) through keyboard interactions and screen readers. 

This is the tab order for the Video carousel (CD).

Video carousel tab order

Keyboard interactions

You can access the actionable elements of the data table with these keyboard interactions:

  • Tab: Focuses on the carousel container, navigation controls, and play button
  • Arrow keys (left/right): Navigates between videos when navigation controls are focused
  • Enter/spacebar: Plays the video when the play button is focused
  • Escape (esc): Closes the video player modal (if applicable)