This article will cover what are the different embed code types supported by Kaltura, and the differences when using Kaltura Player v2 and v7. Learn about the three types of embed code options: auto Embed, dynamic embed, and Iframe embed, and where, and when to use them.
Dynamic Embed
Dynamic embed is recommended for cases where you want to control runtime configuration dynamically and/or have more control over the embed call.
Basic dynamic embed codes look like this:
V2 Dynamic Embed | |
<div id="kaltura_player_1657529534" style="width: 560px; height: 395px;"></div> <script> kWidget.embed({ "targetId": "kaltura_player_1657529534", "wid": "_2068231", "uiconf_id": 50380002, "flashvars": {}, "cache_st": 1657529534, "entry_id": "1_zdyx07u4" }); </script> |
V7 Dynamic Embed |
<script type="text/javascript" src="https://cdnapisec.kaltura.com/p/2068231/embedPlaykitJs/uiconf_id/50575592"></script> <script type="text/javascript"> try { var kalturaPlayer = KalturaPlayer.setup({ targetId: "kaltura_player_621319997", provider: { partnerId: 2068231, uiConfId: 50575592 } }); kalturaPlayer.loadMedia({entryId: '1_zdyx07u4'}); } catch (e) { console.error(e.message) } </script> |
Iframe Embed
The iframe embed is good for sites that don’t allow third-party JavaScript to be embedded in their pages. This makes the iFrame embed a better fit for sites that have stringent page security requirements.
It is possible to control the configuration passed to the player by adding query strings params (This is same as the Auto Embed configuration - Look there for more details)
Note that if you use the iframe-only embed mode, the page won’t be able to access the player API.
Basic iframe embed codes look like this:
V2 IFrame Embed | V7 IFrame Embed |
<iframe id= "kaltura_player_1657529513" src="https://cdnapisec.kaltura.com/p/2068231/sp/206823100/ embedIframeJs/uiconf_id/50380002/partner_id/2068231 iframeembed=true &playerId=kaltura_player_1657529513 &entry_id=1_zdyx07u4" width="560" height="395" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0"> </iframe> |
<iframe type= "text/javascript" src='https://cdnapisec.kaltura.com/p/2068231/ embedPlaykitJs/uiconf_id/50575592?iframeembed=true&entry_id=1_zdyx07u4' style= "width: 560px; height: 395px "allowfullscreen webkitallowfullscreen mozAllowFullScreen allow= "autoplay *; fullscreen *; encrypted-media * "frameborder="0"></iframe> |
Auto Embed
Auto embed is the recommended embed code for the Kaltura Player. It uses precise code and is good for getting a player or widget onto the page quickly and easily without any runtime customizations.
Auto embed is optimized for packing lots of resources into the initial request, allowing the player to be rendered quickly.
It is possible to control the configuration passed to the player by adding query strings params. The parameter name should be config[CONFIG_SECTION_NAME]
. The CONFIG_SECTION_NAME
possible options are playback, provider, and plugins. The value of the configuration passed should be in JSON Format and the JSON keys should be quoted Strings. Make sure to pass only URL valid characters, so URL encode before - The configuration will be decoded properly to the original characters.
Basic Auto embed codes look like this:
V2 Auto Embed | V7 Auto Embed |
<script src="https://cdnapisec.kaltura.com/p/4834032/sp/4834032100/ embedIframeJs/uiconf_id/51010522/partner_id/4834032?autoembed=true& entry_id=1_w9cch3ri&playerId=kaltura_player_1668426277 &cache_st=1668426277&width=400&height=333"> </script> |
<div id="kaltura_player_791458787 "style="width: 560px;height: 395px"> </div> <script type="text/javascript" src='https://cdnapisec.kaltura.com/p/4834032/embedPlaykitJs/ uiconf_id/50952692autoembed=true& targetId=kaltura_player_791458787&entry_id=1_w9cch3ri'> </script> |