SEEN Video Player – SEEN Documentation

For a guide on how to configure and customize your SEEN Video Player, see the Player Node article.

Using Standalone SEEN Video Player

SEENs video player is usable as a standalone link. If used as a standalone player, the page offers a full screen experience for the receiver.

Standalone player domains follow the below structure: https://player.seen.io/v/AhdlZ6Qq28LDQAptGHUY

Base URL: https://player.seen.io/v/

Video Identifier: AhdlZ6Qq28LDQAptGHUY

Each video has their unique Video Identifier.

Embedding the SEEN Video Player

Integrate SEEN’s video player seamlessly into your website or application with a simple HTML snippet. Follow the steps below to embed the player and customize 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>
	</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>
</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>
</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.

5. Player events

You can include Player events to your set up 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; // ISO 8601 format
    data: {
      currentTime: number; // seconds
      duration: number;    // seconds
    };
  }

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;
      }
    }
  });

Need Help?

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