---
url: https://docs.seen.io/platform/player/embedding.md
description: >-
  Explains how to embed and customise the Seen video player with an HTML iframe
  snippet, including autoplay, responsive sizing, and player events.
---

# Embedding & customise the Seen Video Player

Integrate **Seen's video player** seamlessly into your website with a simple HTML snippet. Follow the steps below to embed the player and customise its appearance.

![An embedded Seen video player showing a personalised video](/images/player-embedding-example.png)

## 1. Basic Integration

To embed the **Seen** video player on your webpage, include the following `<iframe>` snippet in your HTML code:

```html
<iframe src="https://player.seen.io/v/AhdlZ6Qq28LDQAptGHUY"
        style="aspect-ratio: 16 / 9; width: 900px; border: 0;"
        webkitallowfullscreen mozallowfullscreen allowfullscreen
        allow="clipboard-write; fullscreen; web-share;">
</iframe>
```

**Understanding the URL Structure:**

* **Base URL:** `https://player.seen.io/v/`
* **Video Identifier:** `AhdlZ6Qq28LDQAptGHUY`

**Parameters Explained:**

* **src**: The URL of the Seen video player with the specific video ID.
* **aspect-ratio**: Maintains a responsive **16:9** aspect ratio for optimal video scaling.
* **width**: Defines the width of the player (default: **900px**). Adjust as needed.
* **border**: Removes the default iframe border for a clean look.
* **webkitallowfullscreen, mozallowfullscreen, allowfullscreen**: Enables full-screen playback on different browsers.

## 2. Customising the Player

You can modify the **width** or adjust the **aspect ratio** to fit your design.

**Responsive Width Example:**

To make the video player responsive, use **CSS** instead of a fixed width:

```html
<style>
  .seenio-player {
    width: 100%;
    max-width: 900px;
    height: 600px;
  }
</style>

<iframe class="seenio-player"
        src="https://player.seen.io/v/AhdlZ6Qq28LDQAptGHUY"
        style="aspect-ratio: 16 / 9; border: 0;"
        scrolling="no"
        webkitallowfullscreen mozallowfullscreen allowfullscreen
        allow="clipboard-write; fullscreen; web-share;">
</iframe>
```

**Adjusting Aspect Ratio:**

For different aspect ratios (e.g., **4:3** instead of **16:9**), update the style attribute:

```
style="aspect-ratio: 4 / 3; width: 800px; border: 0;"
```

## 3. Dynamic Video Embedding

If you want to **dynamically load different videos**, replace the `src` attribute with a dynamic value from your backend or JavaScript:

```html
<iframe id="seenioPlayer"
        src=""
        style="aspect-ratio: 16 / 9; width: 900px; border: 0;"
        scrolling="no"
        webkitallowfullscreen mozallowfullscreen allowfullscreen
        allow="clipboard-write; fullscreen; web-share;">
</iframe>

<script>
  const videoId = "AhdlZ6Qq28LDQAptGHUY"; // Replace dynamically as needed
  document.getElementById("seenioPlayer").src = `https://player.seen.io/v/${videoId}`;
</script>
```

## 4. Autoplay

You can enable autoplay for the Player by including `autoplay=1` or `autoplay=true` to your iframe configuration. Autoplay videos start muted.

## 5. Player Events

You can include Player events in your setup to allow further customisation on your pages.

The Player events follow the below structure:

```json
{
    "type": "seen-player-event",
    "event": "video-played" | "video-paused" | "video-ended",
    "playerId": "string",
    "timestamp": "string",
    "data": {
      "currentTime": 0,
      "duration": 0
    }
}
```

Example implementation:

```javascript
window.addEventListener('message', (event) => {
  if (event.data.type === 'seen-player-event') {
    switch (event.data.event) {
      case 'video-played':
        console.log('Video started playing at', event.data.data.currentTime);
        break;
      case 'video-paused':
        console.log('Video paused at', event.data.data.currentTime);
        break;
      case 'video-ended':
        console.log('Video ended');
        break;
    }
  }
});
```

## Further reading

::: info

* [Seen Player tracking explainer](./tracking-explainer)
* [Seen Video Player WCAG Compliance](./wcag-compliance)
  :::

**Need Help?**

For further customisation or API integration, contact our support team at <support@seen.io>.