# Basic Iframe Integration

## **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.

***

#### **1. Embedding the Iframe**

To get started, embed the Streampixel iframe into your frontend with the following configuration:

```html
<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.

{% hint style="info" %}
Always include `allow="autoplay; fullscreen"` to enable autoplay and fullscreen functionality.
{% endhint %}

***

#### **2. 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
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.

***

#### **3. Focus Management 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
<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>

```

{% hint style="info" %}
Ensure the iframe regains focus after users interact with external buttons or controls.. Use `iframe.focus()` after handling button clicks.
{% endhint %}