Embedding with the IFrame API
Use the IFrame Player API when an iframe alone is not enough. You can control playback from your code, listen for events, and update settings at runtime.
If you do not need JavaScript, use a simple iframe embed
.
Connect the API
- Declare
onKinescopeIframeAPIReady(playerFactory)on the page before loading the API script. - Load
https://player.kinescope.io/latest/iframe.player.js. - When the API is ready, Kinescope calls your function and passes the factory for creating a player .
Instead of a callback, you can use the @kinescope/player-iframe-api-loader
package. It returns the factory through async/await and includes TypeScript types.
Example
<!doctype html>
<html>
<body>
<!-- The player replaces this <div> with an <iframe>. -->
<div id="player"></div>
<!-- To set custom styles or attributes, use an <iframe> instead of a <div>: -->
<!-- <iframe id="player" class="my-class"></iframe> -->
<script>
const tag = document.createElement('script');
tag.src = 'https://player.kinescope.io/latest/iframe.player.js';
document.head.appendChild(tag);
function onKinescopeIframeAPIReady(playerFactory) {
playerFactory
.create('player', {
url: 'https://kinescope.io/VIDEO_ID',
size: { width: '100%', height: 400 },
})
.then((player) => {
player.once(player.Events.Loaded, (event) => {
event.target.setVolume(0.5);
});
player.on(player.Events.Playing, (event) => {
setTimeout(() => {
event.target.pause();
}, 5000);
});
});
}
</script>
</body>
</html>
IFrame API sections
| Section | Description |
|---|---|
| Create a player | Factory, create(), and CreateOptions parameters |
| Control the player | Methods and events of a player instance |
| Automatic connection | Connect the API to an existing iframe |
| player-iframe-api-loader | npm API loader and TypeScript types |
| Libraries | React, Vue, Angular, and other wrappers |