Embedding a Responsive Webcasting Player with Q&A on External Websites

Webcasting currently works in MediaSpace, however, when you try to embed the webcasting player in an external web page, you may see an iframe that contains both the player and the Q&A, that do not display properly and are also not responsive.

Regular KMS embed (iframe)
Responsive embed

This document provides instructions on how to embed a responsive webcasting player + Q&A. This is temporary solution until KMS will be able to provide the final embed code in a simple copy & paste.To have a responsive webcast embed, please use the example provided here.  Note - you will need to replace specific values in the example for your specific webcast. (See the comments in the code and instructions how to obtain those values below.)

HTML code
<!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap  our KMS has Bootstrap 2.3-->
    <link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" integrity="sha384-4FeI0trTH/PCsLWrGCD1mScoFu9Jf2NdknFdFoJhXZFwsvzZ3Bo5sAh7+zL8Xgnd" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js" integrity="sha384-vOWIrgFbxIPzY09VArRHMsxned7WiY6hzIPtAIIeTFuii9y3Cr6HE6fcHXy5CFhc" crossorigin="anonymous"></script>
</head>
<body>
<style>
    #kaltura_player,
    #kaltura_player object,
    #kaltura_player embed,
    #kaltura_player iframe {
        background: #000;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .wrapper-video{
        overflow: hidden;
        position: relative;
        padding-top: 30px !important;
        padding-bottom: 56.25% !important;
        height: 0;
 
    }
 
 
</style>
<br />
<div class="container" style="height: auto !important;">
    <div class="row">
        <div class="span8">
            <div class="wrapper-video">
                <div id="kaltura_player"></div>
            </div>
        </div>
        <div class="span4" style="margin: 0">
            <div id "qnaListHolder"></div>
        </div>
    </div>
</div>
<script>
 
    kWidget.embed({
        "targetId": "kaltura_player",
        "wid": "1_n8cb2xh4", // put here partner ID (see below how to obtain it)
        "uiconf_id": 42900802, // put here UIconf ID (see below how to obtain it)
        "flashvars":
            {
                "applicationName": "KMS5",
                "disableAlerts": "false",
  //            "IframeCustomPluginCss1": "custom.css", // this CSS hides the QNA button
                "autoPlay": "true",
                "dualScreen": {"plugin": "true"},
                "chapters": {"plugin": "true"},
                "sideBarContainer": {"plugin": "true"},
                "LeadWithHLSOnFlash": "true",
                "EmbedPlayer.LiveCuepoints": "true",
                "EmbedPlayer.EnableIpadNativeFullscreen": "true",
                "qna": {
                    "plugin": "true",
                    "moduleWidth": "200",
                    "containerPosition": "right",
                    "qnaPollingInterval": "10000",
                    "userRole" : "anonymousRole" ,
                    "onPage": "true",
                    "overrideModeratorName": "Moderator",
                    "qnaTargetId": "qnaListHolder"
                },
            },
        "entry_id": "1_ty3y5awq" //put here the webcast entry ID
    });
 
</script>
 
</body>
</html>

 

To embed a responsive webcasting player + Q&A

  1. Obtain the wid , uiconf_id, entry_id and partner_id
    a. Open the webcast entry in MediaSpace
    b. Click on Share→embed.
    2. Paste the embed code to a text editor and look for the following:

  • wid={this is the wid} - example: "&wid=1_n7a79m5h" For more information see What is the Kaltura Widget ID?
  • uiconfid/{this is the uiconfid} - example: ".../uiconf_id/42900802/...}
  • entry_id={this is the entry id) - example: "entry_id=1_ty3y5awq"
  • partner_id/{this is the partner id) - example: ".../partner_id/1875041"
  • Paste the values in your embedded webcast.

Known Limitations

  1. Polls are not supported. 
  2. Before the broadcast starts, the player will display “Not broadcasting” (rather than the thumbnail and information about when the event is scheduled to start as it appears in KMS.)
  3. Since users are not authenticated, when a question is asked, the Webcasting Moderator will see an ‘undefined’ user name (This is not visible to the users, just the Webcasting Moderator.)

When using this type of embed, users that will watch the webcast will be considered anonymous in Kaltura. If you want to obtain end user analytics and other information, you will need to pass the KS. In that case, the WID becomes irrelevant because you will need to generate a KS for the player, and the player will not use the WID to request a KS.).

In This Article