Iframe SDK
Connect to a player embedded in an iframe
The iframe embed loads the player from converteai.net in a separate browsing context. Your page cannot reach into it directly, so the SDK opens a message channel between the two and gives you an IframePlayer with the same methods and events as the element.
Loading the SDK
The SDK is a single script, loaded once per page no matter how many players it serves:
<script type="text/javascript">
var s = document.createElement("script");
s.src = "https://scripts.converteai.net/lib/js/smartplayer-wc/v4/sdk.js";
s.async = !0;
document.head.appendChild(s);
</script>
<div id="ifr_PLAYER_ID_wrapper" style="margin: 0 auto; width: 100%;">
<div id="ifr_PLAYER_ID_aspect" style="position: relative; padding: 56.25% 0 0 0;">
<iframe
id="ifr_PLAYER_ID"
src="about:blank"
frameborder="0"
allowfullscreen
referrerpolicy="origin"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
onload="this.onload=null, this.src='https://scripts.converteai.net/ACCOUNT_ID/players/PLAYER_ID/v4/embed.html'+(location.search||'?')+'&vl='+encodeURIComponent(location.href)"
></iframe>
</div>
</div>
The iframe starts at about:blank and swaps to the real embed in its onload handler. That is not decoration: it is how the embed URL picks up location.href and passes it along as vl, which the player needs to attribute the view to the page it is on.
Waiting for the connection
The player is unusable until the bridge is up. The SDK announces it with iframe:connected, dispatched on the <iframe> and bubbling up to document:
// don't call methods before the connection:
// window.vturbSdk.get("PLAYER_ID") returns undefined until then,
// and window.vturbSdk itself is undefined until the SDK script loads
document.addEventListener("iframe:connected", (event) => {
// identify which player connected
if (event.detail.id !== "PLAYER_ID") return;
const player = event.detail.player;
// the iframe player is connected now
player.fullscreen();
});
// or, listening on the iframe element itself
const iframe = document.getElementById("ifr_PLAYER_ID");
iframe.addEventListener("iframe:connected", (event) => {
const player = event.detail.player;
// do something
});
Because the event fires for every player on the page, event.detail.id is how you tell them apart. window.vturbSdk.get(playerId) returns the same player once connected. Before that it returns undefined, and window.vturbSdk itself is undefined until the SDK script loads, so a method called on either throws.
player:ready never fires on the iframe. Code waiting for it waits
forever. iframe:connected is the equivalent.
What you give up
The SDK bridges the API, not the rendering. CSS variables, attributes and injectUrlUpdater stay on the element side of the boundary, and headline custom JS does not run under a Content Security Policy. Element vs iframe has the full comparison.