Share and embed media

About

Embedding puts videos right on your site, so users stay put without being sent elsewhere. Use our simple embed code for responsive, mobile-friendly videos in no time. This guide covers the basics of embedding video on your site.

Access the Share & Embed page

1. Log into your KMC.
   The Entries page displays by default.
2. Navigate to the entry you want to share and embed.
   There are two ways to access the Share & Embed function:
   • Click on the entry.
     The entry details page displays.
     
   • Below the video thumbnail, click Share & Embed.
     OR
   • Click the 3 dots menu to the right of the entry.
   • Click Share & Embed.
     The Share & Embed page displays.

Share & Embed page

Preview entry and select player

Select your preferred player from the player drop-down menu (1). A search is also available when you open the players drop-down list. To learn more about players, visit our article The Kaltura Player Studio - Getting Started.

If you'd like to define the order in which the players are listed, click the settings iconto open the menu (2) . 

Expand / hide icon (3) - (Optional) Click to reveal or hide the Embed code options.

Standalone Preview (4) - (Optional) Click to view a standalone page with this player by clicking on the provided link.

Scan Code for Mobile Preview (5) - (Optional) Scan the QR code to preview the content in your mobile device.

Advanced Settings

The embed code, short link and QR code are regenerated for each change in the advanced settings. The changes are saved and reloaded for further use.

Embed types

Select the Embed Type (6) from the drop-down menu.

The following options are available:

• Dynamic Embed – This is the preferred method to dynamically embed the Kaltura player into web sites and web applications.
• Iframe Embed (default) - iframe embed (no page JavaScript) is good for sites that do not allow 3rd party JavaScript to be embedded on their pages. This mode fits more stringent page security requirements while supporting and HTML5 delivery.
• Auto Embed –  Auto embed is concise embed code and is good for quickly getting a player or widget onto the page without any run time customization.
• Thumbnail Embed - This embed allows you to embed a video to a page without loading the player. The embed will display the video thumbnail image until the play button is clicked and only then will the player load. This is useful when embedding many players in the same page as it decreases the page load time.

Support for HTTPS embed code (7) - (Optional) Toggle on if you intend to put the player on pages that are delivered over HTTPS. The HTTPS embed URLs use protocol relative URLs so that the same embed code also works for non-secure delivery.

Embed your video

When you're ready to embed the video, click Copy under the window that displays the embed code.

Select the platform you want to share your media to, and paste the embed code into the embed field.

Embed code examples

Dynamic Embed

<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

<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

<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>

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!