Easy UI Hooks

The YOM embed script handles fullscreen management, aspect ratio scaling, and stream lifecycle automatically. Here’s how to configure each behavior.

Fullscreen Modes

Set the fullscreen mode via data-fullscreen on your .yom-player-placeholder:

<div class="yom-player-placeholder"
     data-yom-stream-id="1"
     data-game-id="my-game"
     data-fullscreen="window">
</div>

Window mode is recommended for cross-platform support. It works on iOS (where the native Fullscreen API is not available) and handles ancestor CSS transforms that would otherwise break position: fixed.

Fullscreen toggle cycle

When the player requests fullscreen repeatedly, the modes cycle:

• Desktop: none → window → native → none
• iOS: none → window → none (native is skipped)

Automatic Scaling

The stream automatically scales to fill its container while maintaining the correct aspect ratio. When fullscreen mode changes or the window is resized, the embed script notifies the player of the new viewport dimensions, and the game resolution adjusts accordingly.

No configuration needed — this works out of the box.

Stream Lifecycle

When the stream is active, the embed script manages several things automatically:

1. Iframe creation — Created inside .yom-player-placeholder on launch, with correct permissions (autoplay, microphone, clipboard-write, pointer-lock).
2. Opacity fade-in — The iframe fades in over 300ms once ready.
3. Visibility toggles — Elements with .yom-toggle-visibility are toggled on stream start/close.
4. Container hooks — The element referenced by data-hook receives the .yom-active class.
5. Viewport notifications — On resize or fullscreen change, the player is notified of new dimensions.

Auto-Initiate

Skip the launch button entirely and start the stream as soon as the page loads:

<div class="yom-player-placeholder"
     data-yom-stream-id="1"
     data-game-id="my-game"
     data-auto-initiate="true">
</div>

The player name can be pre-filled via the guestName iframe parameter or the .yom-name-input field.

Observability

The embed script includes built-in Grafana Faro integration for real-user monitoring. Console logs, errors, and traces are automatically captured — no setup required on your end.

Errors are also reported to the YOM backend for debugging purposes.