LiveMarket Video Modal Component

The Video Modal component is a special case among the components - it isn’t used by itself, but with other components.
Its instance opens whenever you click a short in the following components:

Usage

Via other components

If you use any of the components in which the Video Modal is essential, our script will automatically append it to the end of your page’s <body> tag.

The first instance of such components in DOM will determine what token the Modal uses - see the component props section to learn more.

Manual implementation

You may choose to implement the Modal manually instead.

To do so, place the following element into your document (don’t forget to use the correct token!):

    <lm-video-modal token="your sdk token here"></lm-video-modal>

Controlling the Modal with JavaScript

Regardless of how you implement the Modal, once it’s embedded in your page’s DOM, you may open it yourself using the window.openLmVideoModal function.

It accepts an object of various properties. Some of them are specific to the short that’s supposed to be displayed when the Modal’s opened - referred to as “opening short” in the code snippet below. Others are component properties.

window.openLmVideoModal({
    callerComponent: 'Custom_JavaScript', // callerComponent is used by Google Analytics
    shorts: [], // an array of all the shorts the Modal should be able to navigate between
    playbackId: '', // the opening short's playback ID.
    products: [], // the opening short's product list.
    thumbnailPoster: '', // url of the opening short's poster thumnail
    clientId: 0, // client ID provided by the LiveMarket SDK
    autoplay: true, // whether to autoplay videos (note it's true by default)
    storiesType: false, // whether the Modal should behave as if it was opened by the Stories component
    
    // see the "Component props" section for further information on properties listed below
    disableLoop: false,
    hideBranding: false,
    hideProducts: false,
    hideSwatches: false,
    localeFront: 'pl',
    mobileAlwaysFullScreen: false,
    videoMuted: false,
    modalLoopMode: 'list',
});

Component props

Unlike other components, the Video Modal is rarely defined manually, so it doesn’t follow the standard props implementation.
Instead, the components that open a Modal’s instance provide it with all the relevant props.

The only exception being the token prop, which is required in case of manual implementation:

Prop Description Default
token Token for api request headers Taken from the first instance of any of the components that implement it.
In case of manual implementation, taken as usual from the token HTML attribute.

Component props affecting the Modal

Below is a table of all the component properties supported by the Video Modal component. Using them in other components will apply them to the Modal once it’s opened by that component.

Prop Description Default
disable-loop Disable videos looping automatically. Some component behavior (such as Stories) will override looping behavior regardless of this setting. false
hide-branding Add for hide branding logo on the top of modal after click on short false
hide-swatches Hide swatches (little images of product or colors) in the variant selection false
mobile-always-full-screen Make videos take up the entire screen (regardless of aspect ratio) on small screens false
video-muted Mute videos at the start false

All components implementing the VideoModal component support modal-specific props. Those do not affect the components themselves, just the Modal they’ll open.

Prop Description Default
modal-hide-products The Video Modal component ignores the hide-products property of its caller component. This prop hides products only inside the Modal. false
modal-loop-mode Controls the Modal’s behavior on video end. Can be list, list-end, single, or disabled. See the Modal loop mode section below for an in-depth explanation. list
disable-modal-manual-loop Boolean prop. Controls whether navigation to the previous and next videos should also loop if the modal-loop-mode is set to list. false

The modal-loop-mode prop controls what happens when a currently playing video ends.

Accepted values:

  • list - The Video Modal will automatically play the next video in the list provided by the caller component and loop back to the beginning. Default for all components except Stories.
  • list-end - Same as above, but it will not loop back to the beginning. This is the default behavior for the Stories component.
  • single - Loops over a single video infinitely.
  • disabled - Nothing happens. Virtually the same as the disable-loop prop.

CSS variables

Common variables

Click here to see the variables shared across all components.

Variable Description Default
--lm-scroll-btn-radius Border radius video changing buttons in modal 50%
--lm-scroll-btn-bg Background color for video changing buttons in modal #d9d9d980
--lm-scroll-btn-border Border modifiers for video changing buttons in modal 0.125rem solid $fff
--lm-modal-close-btn-border-radius Border radius for close modal button 1.5rem
--lm-modal-video-border-radius Border radius for modal video 1.5rem
--lm-modal-z-index The z-index of the component - change it if other elements on your page overlap the modal 9998

Products List

Variable Description Default
--lm-modal-product-list-border-radius Border radius for product list in modal 0.625rem
--lm-modal-product-list-image-border-radius Border radius for product list images in modal 0.5rem
--lm-modal-product-list-title-font-size Font size of the product list title in modal 0.625rem
--lm-modal-product-list-title-line-height Line height of the product list title in modal 1
--lm-modal-product-list-title-font-weight Font weight of the product list title in modal 500
--lm-modal-product-list-price-color Color of price in product list in modal #BD1C33
--lm-modal-product-list-price-font-size Font size of price in product list in modal 0.625rem
--lm-modal-product-list-price-font-weight Font weight of price in product list in modal 400
--lm-modal-product-list-price-line-height Line height of price in product list in modal 1.5

All Drawers

Variable Description Default
--lm-drawer-close-btn-bg-color Background color for button closing the drawer #00000014
--lm-drawer-close-btn-color Color of icon in button closing the drawer #fff
--drawer-border-radius Border radius of the drawer 25px

Product drawer

Variable Description Default
--lm-modal-product-drawer-title-font-size Font size of the title in drawer 0.875rem
--lm-modal-product-drawer-title-font-weight Font weight of the title in drawer 500
--lm-modal-product-drawer-title-line-height Line height of the title in drawer 1.2

Product drawer - price when no discount

Variable Description Default
--lm-modal-product-drawer-price-font-size Font size of the price in drawer with no discount 0.875rem
--lm-modal-product-drawer-price-line-height Line height of the price in drawer with no discount 400
--lm-modal-product-drawer-price-font-weight Font weight of the price in drawer with no discount 1.2
--lm-modal-product-drawer-price-color Color of the price in drawer with no discount #BD1C33

Product drawer - price discounted

Variable Description Default
--lm-modal-product-drawer-price-discounted-font-size Font size of the price in drawer with discount 0.875rem
--lm-modal-product-drawer-price-discounted-font-weight Font weight of the price in drawer with discount 400
--lm-modal-product-drawer-price-discounted-line-height Line height of the price in drawer with discount 1.2
--lm-modal-product-drawer-price-discounted-color Color of the price in drawer with discount #BD1C33

Product drawer - price undiscounted

Variable Description Default
--lm-modal-product-drawer-price-undiscounted-font-size Font size of the undiscounted price in drawer 0.875rem
--lm-modal-product-drawer-price-undiscounted-font-weight Font weight of the undiscounted price in drawer 400
--lm-modal-product-drawer-price-undiscounted-line-height Line height of the undiscounted price in drawer 1.2
--lm-modal-product-drawer-price-undiscounted-color Color of the undiscounted price in drawer #616161
--lm-modal-product-drawer-price-undiscounted-opacity Opacity of the undiscounted price in drawer 0.3

Product drawer - product select

Variable Description Default
--lm-modal-product-drawer-select-border-radius Border radius of select in drawer 0.875rem
--lm-modal-product-drawer-select-padding Padding of select in drawer 0.5rem 2.25rem 0.5rem 0.5rem
--lm-modal-product-drawer-select-border-color Border color of select in drawer #ABB4C1

Product drawer - Add to Cart

Variable Description Default
--lm-modal-product-drawer-add-to-cart-bg Background color of the add to cart button BD1C33
--lm-modal-product-drawer-add-to-cart-border-radius Border radius of the add to cart button 0.875rem