Automatically connecting an embedded video to the IFrame API
You usually create a player through create()
. If an iframe is already on the page, you can connect the API to it automatically.
Follow these steps:
- Add the
?autoURL parameter to the IFrame Player API script. - Add the
?enableIframeApiURL parameter to thesrcof each video<iframe>.
The
onKinescopeIframeAPIReady handler runs when each player is created. If the page has multiple videos with enableIframeApi, subscribe to playerFactory.Events.Created to handle every instance.Example
<!doctype html>
<html>
<head>
<!-- IFrame Player API script with the ?auto parameter:
all matching <iframe> elements on the page connect to the API.
defer runs the script after the HTML is parsed. -->
<script defer src="https://player.kinescope.io/latest/iframe.player.js?auto"></script>
<script>
function onKinescopeIframeAPIReady(playerFactory) {
playerFactory.on(playerFactory.Events.Created, ({ data: player }) => {
player.setVolume(0.5)
})
}
</script>
</head>
<body>
<!-- enableIframeApi allows the connection to the IFrame API -->
<iframe
src="https://kinescope.io/embed/VIDEO_ID?enableIframeApi"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
</body>
</html>
Next steps
- Control the player — methods and events after connecting
- Simple iframe embed — iframe and URL parameters
- Create a player
— the standard workflow with
create()