About
This article provides example embed code for each embed type available on the Share & Embed page in the KMC. Use these examples to understand how each code format works when adding Kaltura media to your website or application.
These examples are for reference only. Replace the IDs in the samples with your own partner ID, uiconf ID, and entry ID when embedding.
Embed code examples
Dynamic embed
The dynamic embed method loads the Kaltura Player using JavaScript.
<div id="kaltura_player_419173545" style="width: 560px;height: 395px"></div>
<script type="text/javascript" src="https://cdnapisec.kaltura.com/p/4834032/embedPlaykitJs/uiconf_id/50952692"></script>
<script type="text/javascript">
try {
var kalturaPlayer = KalturaPlayer.setup({
targetId: "kaltura_player_419173545",
provider: {
partnerId: 4834032,
uiConfId: 50952692
}
});
kalturaPlayer.loadMedia({entryId: '1_fwzaeesq'});
} catch (e) {
console.error(e.message)
}
</script>Iframe embed
The iframe embed method displays the player within an iframe. It’s best for websites that don’t allow third-party JavaScript.
<iframe type="text/javascript" src='https://cdnapisec.kaltura.com/p/4834032/embedPlaykitJs/uiconf_id/50952692?iframeembed=true&entry_id=1_fwzaeesq' style="width: 560px; height: 395px" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0"></iframe>
Auto embed
The auto embed method provides a concise code format for quickly embedding a player or widget.
<div id="kaltura_player_30467316" style="width: 560px;height: 395px"></div> <script type="text/javascript" src='https://cdnapisec.kaltura.com/p/4834032/embedPlaykitJs/uiconf_id/50952692?autoembed=true&targetId=kaltura_player_30467316&entry_id=1_fwzaeesq'></script>
Thumbnail embed
The thumbnail embed method displays a thumbnail image until the play button is clicked. This approach helps reduce page load time when embedding multiple media items.
<div id="kaltura_player_302057085" style="width: 560px;height: 395px"></div><script type="text/javascript" src="https://cdnapisec.kaltura.com/p/4834032/embedPlaykitJs/uiconf_id/56381652"></script><script src="https://static.kaltura.com/content/static/player-scripts/thumbnail-embed.js"></script><script type="text/javascript">try {__thumbnailEmbed({config: {provider: {partnerId: 4834032,uiConfId: 56381652},targetId: "kaltura_player_302057085"},mediaInfo: {entryId: '1_ku01b9pa'}});} catch (e) {console.error(e.message)}</script>
Using HTML
You can create a simple HTML file with the embed code added to the body, as seen in the example below:
1. Create a simple Html file:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> </body> </html>
2. Paste the embed code from the clipboard to the body:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <div id="kaltura_player_30467316" style="width: 560px;height: 395px"></div> <script type="text/javascript" src='https://cdnapisec.kaltura.com/p/4834032/embedPlaykitJs/uiconf_id/50952692?autoembed=true&targetId=kaltura_player_30467316&entry_id=1_fwzaeesq'></script> </body> </html>
You now have an embedded player on your website!
