Appearance

Firework video player allows limited appearance configuration.

Theme

Player color theme can be set by using theme attribute. Each theme can be additionally customized by CSS variables.

Currently available themes are:

• light

• dark (default)

• preferred (alternates between light and dark based on user's OS preference)

Example:

<fw-storyblock channel="firework" theme="light"></fw-storyblock>

Custom UI icons

Certain UI elements can be configured from external sources by providing their public url location. This includes button icons and reaction animation (Firework uses Lottie player).

SVG images will be injected into player DOM so they have access to currentColor variable and are properly colored based on theme. SVG images location has to comply with CORS policy against your origin. Other image types are rendered as background images, can't use theme color and don't require special treatment.

List of supported custom UI assets:

General

Assest	Description
ui_asset_back	Back button asset. Defaults to "<"
ui_asset_close	Close button asset. Defaults to "x"
ui_asset_next	Next item button asset (video, product image). Defaults to ">"
ui_asset_previous	Previous item button asset. Defaults to "<"

Player

ui_asset_closed_captions_disabled	CC button asset to indicate disabled state
ui_asset_closed_captions_enabled	CC button asset to indicate enabled state
ui_asset_fullscreen	Fullscreen button enlarges player to maximal size
ui_asset_menu	More actions menu button asset. Defaults to "3 dots"
ui_asset_muted	Muted state button asset.
ui_asset_unmuted	Unmuted state button asset.
ui_asset_pause	Pause button asset.
ui_asset_play	Play button asset.

Livestream

ui_asset_reaction	Reaction button. Defaults to "Heart"
ui_asset_reaction_animation	Reaction button Lottie animation json. Use any lottiefiles.com animation.

Commerce

ui_asset_shopping_bag	Shopping bag button asset.
ui_asset_shopping_cart	Shopping cart button asset.
ui_asset_product_tag	Product tag displayed on embed feed carousel thumbnail

Example of configuration:

<fw-storyblock
    channel="firework"
    theme="light"
    ui_asset_shopping_bag="https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/24/outline/shopping-bag.svg"
></fw-storyblock>