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

JS Integration