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.

1. Basic Integration

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

<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:

<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:

<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:

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

Example implementation:

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

• Seen Player tracking explainer
• Seen Video Player WCAG Compliance

Need Help?

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