IFrame API (Embedded player)

The IFrame player API lets you embed a PixellotWebSDK video player on your website and control the player using JavaScript.

Bellow is an example of a player that was embedded as an iframe.

To view your video embedded into a page using iframe, you can use the following code:

<iframe
    width="720"
    height="400"
    id="player-iframe"
    src="https://pixellot-web-sdk.pixellot.tv/v3-public/embed.html?project-id={{PROJECT_ID}}&api-base-url={{API_BASE_URL}}&hd-src={{HD_SOURCE_URL}}&pano-src={{PANO_SOURCE_URL}}"
    frameborder="0"
    allowfullscreen
></iframe>

Supported query parameters

• project-id - an id of the project that it belongs to.
• api-base-url - the URL of the SDK API you want to connecct to
• hd-src - source url for hd video to be set into the player.
• pano-src - source url for pano video to be set into the player.
• autoplay - the autoplay option. If autoplay is present then video will be started playing automatically.
• pano-recorder - relates to pano recorder. Will enable recorder for pano playback.

How to make a responsive iframe?

In order to make a responsive iframe you can use the aspect-ratio practice, or something similar.

Bellow is an example that you can use for such cases.

<style>
.iframe-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}
</style>

<div class="iframe-container">
    <iframe
        id="player-iframe"
        class="responsive-iframe"
        src="https://pixellot-web-sdk.pixellot.tv/v3-public/embed.html?project-id={{PROJECT_ID}}&api-base-url={{API_BASE_URL}}&hd-src={{HD_SOURCE_URL}}&pano-src={{PANO_SOURCE_URL}}"
        frameborder="0"
        allowfullscreen
    ></iframe>
</div>