Appearance configuration

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
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_minimize // Minimize player to PIP.
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>