Kaltura - Modify Behavior of Embedded Players [UW-Madison]

This document provides instructions on how to modify the iFrame embed code for Kaltura MediaSpace Players to allow for custom functionality. This should only be attempted by those with some familiarity of editing HTML. It does not work for media embedded in a Canvas course using the Kaltura-Canvas integration.

Change Default View of Interactive Player

The following tutorial shows you how to modify Kaltura MediaSpace embed code to make the interactive player display a different default view when loaded. It should be noted that this is only changing the default view and does not prevent the viewer from changing the view to any of the other available options. The system-wide default view is "Picture in Picture / parent in small view". "Parent" refers to the media (audio or video). To see all the different default layouts, please see: Kaltura - Interactive Video Player Default Layout Examples [UW-Madison].

  1. Copy embed code for the media you want to embed.
  2. Edit the code to contain "&flashvars[dualScreen.defaultDualScreenViewId]=sbs-parent-in-right" (without quotes) or one of the following options:

    Description Example Code Snippet
    Side by Side / parent in right Link to Example &flashvars[dualScreen.defaultDualScreenViewId]=sbs-parent-in-right
    Side by Side / parent in left Link to Example &flashvars[dualScreen.defaultDualScreenViewId]=sbs-parent-in-left
    Picture in Picture / parent in large view Link to Example &flashvars[dualScreen.defaultDualScreenViewId]=pip-parent-in-large
    Parent only Link to Example &flashvars[dualScreen.defaultDualScreenViewId]=parent-only
    No Parent Link to Example &flashvars[dualScreen.defaultDualScreenViewId]=no-parent

  3. For example, in the following code
    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_a3zq6kwh&flashvars[localizationCode]=en&amp;flashvars[leadWithHTML5]=true&amp;flashvars[sideBarContainer.plugin]=true&amp;flashvars[sideBarContainer.position]=left&amp;flashvars[sideBarContainer.clickToClose]=true&amp;flashvars[chapters.plugin]=true&amp;flashvars[chapters.layout]=vertical&amp;flashvars[chapters.thumbnailRotator]=false&amp;flashvars[streamSelector.plugin]=true&amp;flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&amp;flashvars[dualScreen.plugin]=true[Add "&amp;flashvars[dualScreen.defaultDualScreenViewId]=sbs-parent-in-right" here]&wid=0_hume3lgj" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

    The end result will look like this:

    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_a3zq6kwh&flashvars[localizationCode]=en&amp;flashvars[leadWithHTML5]=true&amp;flashvars[sideBarContainer.plugin]=true&amp;flashvars[sideBarContainer.position]=left&amp;flashvars[sideBarContainer.clickToClose]=true&amp;flashvars[chapters.plugin]=true&amp;flashvars[chapters.layout]=vertical&amp;flashvars[chapters.thumbnailRotator]=false&amp;flashvars[streamSelector.plugin]=true&amp;flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&amp;flashvars[dualScreen.plugin]=true&amp;flashvars[dualScreen.defaultDualScreenViewId]=sbs-parent-in-right&wid=0_hume3lgj" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

Make Embedded Media Auto Play on Load

The following tutorial shows you how to modify Kaltura MediaSpace embed code to make your players start playing when the page in which it is embedded is loaded.

  1. Copy embed code for the media you want to embed.
  2. Edit the code to contain "&flashvars[autoPlay]=true".
  3. For example, in the following code
    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_7icw5w80[Add "&flashvars[autoPlay]=true" here]&flashvars[leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&&wid=1_gqk658ir" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

    The end result will look like this:

    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_7icw5w80&flashvars[autoPlay]=true&flashvars[leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&&wid=1_gqk658ir" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

Make Embedded Media Not Display Playback Rate Selector

The following tutorial shows you how to modify Kaltura MediaSpace embed code to make your players not display the playback rate selector when the media is played by viewers.

  1. Copy embed code for the media you want to embed.
  2. Edit the code to contain "&flashvars[playbackRateSelector.plugin]=false".
  3. For example, in the following code
    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_7icw5w80[Add "&flashvars[playbackRateSelector.plugin]=false" here]&flashvars[leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&&wid=1_gqk658ir" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

    The end result will look like this:

    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_7icw5w80&flashvars[playbackRateSelector.plugin]=false&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&wid=1_gqk658ir" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

Make Embedded Media Auto Display Subtitles on Load

The following tutorial shows you how to modify Kaltura MediaSpace embed code to make your players automatically display captions (if available) when the media is played by viewers.

  1. Copy embed code for the media you want to embed.
  2. Edit the code to contain "&flashvars[closedCaptions.displayCaptions]=true".
  3. For example, in the following code
    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_7icw5w80[Add "&flashvars[closedCaptions.displayCaptions]=true" here]&flashvars[leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&&wid=1_gqk658ir" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

    The end result will look like this:

    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_7icw5w80&flashvars[closedCaptions.displayCaptions]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&wid=1_gqk658ir" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

Make Embedded Media Default to Specific Quality

The following tutorial shows you how to modify Kaltura MediaSpace embed code to make your players default to a specific quality (known as "flavor"). There are three flavors to choose from 360P = 900 (current default), 720P = 2500, and 1080P = 4000. In the instructions below swap "4000" for whatever flavor you want to designate as the default.

Although the current default is set to 360P, the Kaltura player is also set to change the quality of the video based on the size of the player. In other words, if a viewer enters full-screen mode, the video will switch to 1080P (if that quality is available and if the viewer's screen is a high enough resolution).

  1. Copy embed code for the media you want to embed.
  2. Edit the code to contain "&flashvars[mediaProxy.preferedFlavorBR]=4000".
  3. For example, in the following code
    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_7icw5w80[Add "&flashvars[mediaProxy.preferedFlavorBR]=4000" here]&flashvars[leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&&wid=1_gqk658ir" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>

    The end result will look like this:

    <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=0_7icw5w80&flashvars[mediaProxy.preferedFlavorBR]=4000&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&wid=1_gqk658ir" width="640" height="360" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>



Keywordsembed, player, html, embed code, auto play, auto start, hide, show, modification, custom, customize media   Doc ID63828
OwnerLearn@UW MadisonGroupLearn@UW-Madison
Created2016-06-02 13:49:22Updated2023-02-08 13:22:17
SitesDoIT Help Desk, Learn@UW-Madison
Feedback  0   0