Widgets
...
Content Hub
Configuration options

Player

6min

The optional player option contains player-specific configuration. LiSA Library supports two options to open the player — either in an overlay (default) or in a embedded iframe — also call stage.

Type definition

TypeScript


Stage

To open the player in a embedded stage, you need to provide an additional HTML element in your content page, and provide a CSS selector with the player.host option, in order for LiSA Library to find the player's host element.

Player stage usage example


Overlay

By default, LiSA Library opens the player in an overlay on top of your content page. The format option allows you to set the format of the player explicitly — either portrait or landscape.

Player overlay usage example


If none of the player configuration options is provided, LiSA Library will open the player in an overlay that fits the output device best — overlay with slight margins on each side for desktop and full viewport overlay for mobile devices.

Options

Format

The format option only applies to the overlay player. You can fix the format to either landscape (16x9) or portrait (9x16). By omitting the format option or setting it to auto, the player will decide the format depending on the video output setting of the show.

Host

The host option is required if you want to embed the LiSA player directly into you content page, rather than opening it in an overlay on above your content page. It accepts a CSS query selector. If the addressed HTML element cannot be found, the player will open in an overlay.

Minimized

The minimized option provides customizations of the minimized LiSA player.

longSideLimit

The longSideLimit option sets the maximum length of the longer side of the player. In portrait mode the limit equivalents to the player's max-height. In landscape mode the limit equivalents to the player's max-width.

position

The position option determines the position of the LiSA mini player. It accepts one of the following values:

  • bl — Bottom left
  • br — Bottom right
  • tl — Top left
  • tr — Top right
  • ElementPosition — Individual positioning using specific offsets to the bottom, left, right or top edge of the viewport.



Updated 25 Mar 2024
Doc contributor
Did this page help you?