> ## Documentation Index
> Fetch the complete documentation index at: https://docs.streampixel.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Basic embed

> Embed the Streampixel iframe into your frontend, configure input handling, and manage focus for custom UI controls.

## Overview

This guide explains how to embed the Streampixel iframe into your frontend, handle input settings for seamless user interaction, and ensure compliance with autoplay policies. It also covers focus management when integrating custom UI controls.

***

<Steps>
  <Step title="Embed the iframe">
    Embed the Streampixel iframe into your frontend with the following configuration:

    ```html theme={"dark"}
    <iframe
      id="streamIframe"
      src="https://share.streampixel.io/project-id"
      allow="autoplay; fullscreen"
      width="100%"
      height="100%"
      frameborder="0"
      allowfullscreen
      style="border: none;">
    </iframe>
    ```

    **Key attributes**

    * **`src`**: Replace `project-id` with the actual ID of your Streampixel project.
    * **`allow="autoplay; fullscreen"`**: Enables autoplay and fullscreen features.
    * **`allowfullscreen`**: Ensures the stream can enter fullscreen mode.
    * **`style`**: Customize the iframe's appearance, such as width and height.

    <Info>
      Always include `allow="autoplay; fullscreen"` to enable autoplay and fullscreen functionality.
    </Info>
  </Step>

  <Step title="Configure input settings for keyboard and mouse">
    To ensure the stream is fully interactive, handle input focus properly for keyboard and mouse inputs.

    **Keyboard input**

    When users interact with the iframe, ensure it gains focus to capture keyboard input:

    ```javascript theme={"dark"}
    const streamIframe = document.getElementById('streamIframe');
    streamIframe.addEventListener('click', () => {
      streamIframe.focus(); // Pass keyboard focus to the iframe on user interaction
    });
    ```

    **Mouse input**

    Mouse interactions typically work out of the box. Ensure the iframe is styled appropriately to cover the desired area.
  </Step>

  <Step title="Manage focus for custom UI controls">
    If your frontend includes buttons or controls outside the iframe (e.g., Mute, Unmute, or custom settings), clicking those controls shifts focus away from the iframe. To maintain seamless interaction with the stream, you must restore focus to the iframe after handling button clicks.

    **Example: custom UI with focus restoration**

    ```html theme={"dark"}
    <button onclick="muteStream()">Mute</button>

    <iframe 
      id="streamIframe" 
      src="https://share.streampixel.io/project-id" 
      allow="autoplay; fullscreen">
    </iframe>

    <script>
      function muteStream() {
        const streamIframe = document.getElementById('streamIframe');
        streamIframe.contentWindow.postMessage({ message: 'muteAudio' }, '*');
        streamIframe.focus(); // Restore focus to the iframe
      }
    </script>
    ```

    <Info>
      Ensure the iframe regains focus after users interact with external buttons or controls. Use `iframe.focus()` after handling button clicks.
    </Info>
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Frontend and application communication" icon="arrows-left-right" href="/resources/iframe-integration/frontend-and-application-communication">
    Send and receive messages between your frontend and the embedded stream.
  </Card>

  <Card title="Stream control commands" icon="sliders" href="/resources/iframe-integration/stream-control-commands">
    Control resolution, audio, and session state from your frontend.
  </Card>
</CardGroup>