Developer Notes
Breakpoints
The player uses a combination of (hover:none) and (pointer: coarse) to detect touch-enabled devices. Not all devices correctly report these metrics, so there may be occasions where specific devices don't display their intended layout.
| Breakpoint | Applies to |
|---|---|
| Mobile | Touch-enabled devices under 576px width |
| Tablet | Touch-enabled devices between 576px and 1300px width |
| Desktop | Non-touch devices, or touch devices over 1300px wide |
Lightbox z-index
If you need to change the lightbox z-index to work within your application, set it before calling show():
const player = lightbox(options)
function handleShowPlayer() {
player.player.style.zIndex = '1000'
player.show()
}Body scroll lock
The player automatically disables body scrolling during specific stages to prevent background page movement:
| Player type | Scroll lock active during |
|---|---|
| Inline | Recap and Next Steps stages |
| Lightbox | Entire player journey |
The player temporarily applies CSS styles to the <body> element and restores the original state when scroll locking is no longer required. This only works correctly if your page's scrolling is on the <body> element. Avoid modifying <body> styles while a player journey is active.
Inline vs lightbox layout
On desktop and large tablet devices, inline players embed directly within your page content while lightbox players open in a modal overlay above the page.
On mobile and small tablet devices, both player types display in full-screen mode. The only difference is that lightbox players include a close button in the top-right corner, whereas inline players do not provide an exit control.
Handling offline
The player does not have a dedicated offline state beyond displaying a buffering animation when video content fails to load. Users can continue to interact with the application (e.g. answer recap questions) and events will continue to fire. If you need to save events to a server, it is your responsibility to handle the offline state and display appropriate messaging.
Unrecoverable errors
An unrecoverable error is thrown when the player encounters an error that prevents the user from completing their journey. You can provide custom HTML content using the unrecoverableErrorCustomHtml configuration option.
Supported HTML tags: <a>, <h2> - <h6>, <p>, <ul>, <ol>, <li>.
For buttons, use an <a> tag with the button classes:
<a class="sx-button sx-button--size-medium sx-button--theme-primary" href="#">
<span class="sx-button__text">Button text</span>
</a>Internationalization
The player supports internationalization (i18n) to provide a localized experience. British English and Welsh are supported out of the box. Other languages can be added on request.