Dynamic Layouts

Show and hide page elements based on whether a stream is active. This lets you build pre-stream landing UIs that disappear when the game starts, and in-stream controls that appear during gameplay.

Visibility Toggling

Add the .yom-toggle-visibility class and a data-yom-stream-id to any element you want to toggle:

<!-- Visible before stream, hidden during stream -->
<div class="yom-toggle-visibility" data-yom-stream-id="1">
    <h2>Welcome! Click below to start playing.</h2>
    <button class="yom-launch-button" data-yom-stream-id="1">Play Now</button>
</div>

<!-- Hidden before stream, visible during stream -->
<div class="yom-toggle-visibility" data-yom-stream-id="1" style="display: none;">
    <p>Game is running. Use the controls below:</p>
    <button onclick="window.postToPlayer('1', 'SpawnBot', {amount: '1'})">Add Bot</button>
</div>

How it works:

1. When the stream becomes active (playerReady), elements toggle: visible ones fade out, hidden ones fade in.
2. When the stream closes (streamClosed), elements toggle back to their original state.

CSS transition

The fade animation is 300ms. Add this CSS so the transition is smooth:

.yom-toggle-visibility {
    transition: opacity 0.3s ease;
}

Container Hooks

Use data-hook on the .yom-player-placeholder to apply an .yom-active class to any container element when the stream is running:

<div id="game-section">
    <div class="yom-player-placeholder"
         data-yom-stream-id="1"
         data-game-id="my-game"
         data-hook="#game-section"
         style="width: 100%; aspect-ratio: 16/9;">
    </div>
</div>

Now you can style the active state with CSS:

#game-section.yom-active {
    background: #000;
    padding: 0;
    max-width: 100%;
}

The .yom-active class is added when the stream starts and removed when it ends, giving you full CSS control over layout changes.