The YOM embed script (yom-embed.js) gives you full control over the stream experience. It manages iframe creation, player lifecycle events, fullscreen behavior, visibility toggles, and bidirectional communication between your webpage and the game.
Getting Started
Include the embed script on your page:
<script src="https://cdn.yom.net/yom-embed.js"></script>Then add the required HTML elements:
<!-- Player container — the iframe will be injected here -->
<div class="yom-player-placeholder"
data-yom-stream-id="1"
data-game-id="YOUR_GAME_ID"
style="width: 100%; aspect-ratio: 16/9;">
</div>
<!-- Launch button -->
<input class="yom-name-input" data-yom-stream-id="1" placeholder="Your name">
<button class="yom-launch-button" data-yom-stream-id="1">Play</button>When the player clicks the button, yom-embed.js creates an iframe inside the placeholder div, connects to YOM, and starts the game stream.
Core Concepts
Required CSS classes
| Class | Purpose |
|---|---|
.yom-player-placeholder | Container where the stream iframe is created |
.yom-launch-button | Button that initiates the stream |
.yom-name-input | Optional text input for player name |
Required data attributes
| Attribute | On | Description |
|---|---|---|
data-yom-stream-id | All elements | Links elements to a specific stream instance |
data-game-id | .yom-player-placeholder | Your game’s unique identifier |
Optional data attributes
Set these on .yom-player-placeholder to configure behavior:
| Attribute | Values | Description |
|---|---|---|
data-request-mic | true/false | Request microphone access |
data-force-mic | true/false | Require microphone to proceed |
data-fullscreen | none/window/native | Fullscreen mode (default: none) |
data-auto-initiate | true/false | Auto-start without button click |
data-require-name | true/false | Require name input (default: true) |
data-hook | CSS selector | Apply .yom-active class to this element during stream |
data-callback | Function name | Custom validation before launch |
data-lang | ISO-639-1 | Language code |
data-publisher | string | Publisher name |
data-coppa | 0/1 | COPPA compliance |
data-genre | string | Game genre |
Complete Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy"
content="frame-src 'self' https://player.yom.net;">
<style>
.yom-toggle-visibility { transition: opacity 0.3s ease; }
</style>
</head>
<body>
<!-- Stream container -->
<div class="yom-player-placeholder"
data-yom-stream-id="demo"
data-game-id="my-game"
data-fullscreen="window"
style="width: 100%; aspect-ratio: 16/9;">
</div>
<!-- Pre-stream UI (hidden when stream starts) -->
<div class="yom-toggle-visibility" data-yom-stream-id="demo">
<input class="yom-name-input" data-yom-stream-id="demo" placeholder="Enter your name">
<button class="yom-launch-button" data-yom-stream-id="demo">Start Game</button>
</div>
<!-- In-stream controls (shown when stream starts) -->
<div class="yom-toggle-visibility" data-yom-stream-id="demo" style="display: none;">
<button onclick="window.postToPlayer('demo', 'SpawnBot', {amount: '1'})">Add Bot</button>
<button onclick="window.postToPlayer('demo', 'ClearBot', {})">Clear Bots</button>
</div>
<script src="https://cdn.yom.net/yom-embed.js"></script>
</body>
</html>What’s Next?
- Custom Authentication — Add validation before stream launch
- Event Handling — Send commands to the game and listen for game events
- Dynamic Layouts — Toggle UI visibility based on stream state
- Easy UI Hooks — Fullscreen modes, auto-scaling, and container hooks
- Multi-Stream Setup — Run multiple game streams on one page