cielo24 Media Intelligence and Interactive Transcript Widget

All of the transcriptions cielo24 can provide also can include media data (timed transcripts) and intelligence (topics, keywords, adwords) to enhance content ROI by powering content discovery, engagement, ad targeting, and asset management.

In addition, cielo24 has an interactive transcript widget leveraging cielo24 proprietary Media data available for select integrations. The functionality include the ability to search within videos as well as:

  • Interactive transcript experience. The transcript is time stamped and synchronized to the video frame.
  • Displays cielo24 media intelligence including topics, keywords and AdWords.
  • Multi language support for native captions and foreign language subtitles.
  • Content search with heat map including words, topics, keywords, and entities.
  • For videos with multiple speakers identified, speaker search by color coded heat map and time stamps.
  • Complete customization including custom settings like social sharing, and transcript download.
  • Configurable social sharing of selected videos down to the specific caption across sites like Facebook, Twitter and LinkedIn.
  • Ability to download and print transcripts including speakers and time stamps.


cielo24 Interactive Transcript Widget Instructions for Kaltura MediaSpace

The cielo24 interactive transcription widget and media data player for Kaltura MediaSpace:

  • Instructions for setting up a player:
    • In Studio > Universal Studio > Edit your favorite player, create new player, or duplicate your favorite player
      • Click on Plugin icon on bottom left
      • Click ‘Import Plugin


      • A dialogue box will pop up to insert a string:


    • Place the string below in the ‘Plugin Configuration String’:

onPageJs1=//{margin-bottom:0}#mediaContainer{height:auto;padding-bottom:0!important;padding-top:0!important}#mediaContainer #player div.kWidgetIframeContainer{position:relative;padding-bottom:56.25%;padding-top:36px;left:auto;top:auto}.entryTitle,.stat_data{margin-top:20px}#mediaContainer #player #cielo24-iframe-wrapper-kplayer{background:#FFF;height:auto;left:auto;position:relative;top:auto;width:auto}#mediaContainer #player #cielo24-iframe-wrapper-kplayer iframe{background-color:#FFF;height:inherit;left:unset;position:unset;top:unset;width:none}

    • Under ‘UI variables’ you can now edit any values to customize the player display.





Default Meaning


Size of Widget


Sized at 400px.


Name of Widget (Displayed in Footer)

Media Data Player

Label displayed on widget.


Logo Displayed on right side of Footer

Logo link displayed on widget.


Link for the 'client' logo displayed on left side of footer

Link displayed on left side of widget footer.


Settings Gear (required for usability)


Settings Gear is defaulted to display.


Social Sharing icon



Social Share is defaulted to display.


Transcript Print icon Display


Transcript Print icon is defaulted to display enabling printing of transcript.


Transcript Download icon Display


Transcript Download icon is defaulted to display enabling download of text transcript.


Tag icon to Display Media Intelligence (only when available for video)


Tag icon defaulted to display media intelligence when the video contains media data. If there is no media data, the icon is dynamically hidden.



Default Display of Speaker Name Display within Interactive Transcript


The speaker name will only appear if speakers have been identified within the transcript. The setting configured is the default value for the display. This is also configurable via the Gear icon interactively.


Default Display of Timestamp Display per Speaker Change or Text Block


Timestamps will only appear if speakers have been identified within the transcript. The setting configured is the default value for the display. This is also configurable via the Gear icon interactively.


Default Behavior for Autoscroll of Interactive Transcript


Autoscroll is the scrolling of the transcript with the playhead. The setting configured is the default value for the display. This is also configurable via the Gear icon interactively.


Media Intelligence: Display Topics within 'Tags' icon


This configures the display capability. The Widget only displays the dropdown under the 'Tags' icon if a value is present in the video. On by default.


Media Intelligence: Display Speakers within 'Tags' icon


This configures the 'capability' to display. The Widget only displays the dropdown under the 'Tags' icon if a value is present in the video. On by default.


Media Intelligence: Display Keywords within 'Tags' icon


This configures the 'capability' to display. The Widget only displays the  dropdown under the 'Tags' icon if a value is present in the video. On by default.


Div name used to display widget in a target div for reference on web page


Not used by default, only used if hosting on a web page to display the interactive transcript widgetin a particular location on the page. Value is 'div' name.


Required for using interactive transcript widget in KMS


.action-edit{margin-bottom:0}#mediaContainer{height:auto;padding-bottom:0!important;padding-top:0!important}#mediaContainer #player div.kWidgetIframeContainer{position:relative;padding-bottom:56.25%;padding-top:36px;left:auto;top:auto}.entryTitle,.stat_data{margin-top:20px}#mediaContainer #player #cielo24-iframe-wrapper-kplayer{background:#FFF;height:auto;left:auto;position:relative;top:auto;width:auto}#mediaContainer #player #cielo24-iframe-wrapper-kplayer iframe{background-color:#FFF;height:inherit;left:unset;position:unset;top:unset;width:none}

Value only used if EnableAdditionalCSS is set to true. Required to display widget in KMS.


Required 'True' for use of interactive transcript widget within KMS


Value determines if AdditionalCSS is referenced. Only used in KMS rendering, compatible with KMC.


To pass search term as a parameter intointeractive transcript widget


Variable not set by default. Default name is 'cielo24search' to override set value for key variable.

cielo24Transcriptions.DynaTransScroll bar

Value for Scrollbar search result heat map display


By default vertical heatmap/scrollbar is displayed. To use horizontal heatmap for search results set value to

'horizontal', omit for vertical only rendering.


'Sponsor' logo on the right corner of the widget footer

cielo24 logo

No logo is present.


Link for the 'Sponsor' logo displayed on right side of footer



No valid link.


Controls display of the footer of the widget ­including all logos, links, and display text.


By default, the footer will be displayed using Logos, Links, and Display Text defined.


Transcript Panel Hidden FALSE  Variable controls whether the Interactive Transcript Panel is either shown or hidden by default.



cielo24 Interactive Transcript Widget Instructions for iFrame Embed 

  • The instructions for creating an iFrame supported version of the widget for embedding content is similar to the Mediaspace setup. The value to copy into ‘‘Plugin Configuration String’ is different:

IframeCustomPluginJs1=//{margin-bottom:0}#mediaContainer{height:auto;padding-bottom:0!important;padding-top:0!important}#mediaContainer #player div.kWidgetIframeContainer{position:relative;padding-bottom:56.25%;padding-top:36px;left:auto;top:auto}.entryTitle,.stat_data{margin-top:20px}#mediaContainer #player #cielo24-iframe-wrapper-kplayer{background:#FFF;height:auto;left:auto;position:relative;top:auto;width:auto}#mediaContainer #player #cielo24-iframe-wrapper-kplayer iframe{background-color:#FFF;height:inherit;left:unset;position:unset;top:unset;width:none}body{background-color:white}&onPageCss1=//

  • To verify and ensure that the iFrame embed widget is configured correctly, review the following differences under the UI variables compared to the Mediaspace version of the widget:
    • In UI Variables, instead of onPageJs1, the key is: IframeCustomPluginJs1
    • A new UI Variable, key onPageCss1 is set to value://
    • Additional Style declaration body {background-color:white} added to additionalCSS:

.action-edit{margin-bottom:0}#mediaContainer{height:auto;padding-bottom:0!important;padding-top:0!important}#mediaContainer #player div.kWidgetIframeContainer{position:relative;padding-bottom:56.25%;padding-top:36px;left:auto;top:auto}.entryTitle,.stat_data{margin-top:20px}#mediaContainer #player #cielo24-iframe-wrapper-kplayer{background:#FFF;height:auto;left:auto;position:relative;top:auto;width:auto}#mediaContainer #player #cielo24-iframe-wrapper-kplayer iframe{background-color:#FFF;height:inherit;left:unset;position:unset;top:unset;width:none}body{background-color:white}

  • To update the embed sizes for ‘browseandembed' (Mashup) or ‘embed’ functions either in the KAF as the default, or per embedded video to support the additional widget size (ex. 400px) configured for the interactive transcript player add the widget height to sizes:
      • Small: 304 x 595
      • Medium: 400 x 650
      • Large: 608 x 765
  • Once setup, copy an embed code set embed type to ‘iframe’ and select 'HTTPS support'.
      • If you have set the ‘embed' defaults in KAF the height will already be adjusted or copy the iframe embed code and manipulate directly.
  • To have the height and width dynamic (responsive) within iFrame use adjust the code:
  • By default, the embed code generated from Kaltura will look like this:

<iframe src="<your link from generated embed code>" width="560" height="395" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" style="width: 560px; height: 395px;" itemprop="video" itemscope itemtype=""><span itemprop="name" content="Your title"></span><span itemprop="description" content="Your Description"></span><span itemprop="duration" content="189"></span><span itemprop="thumbnail" content="<your link from generated embed code>"></span><span itemprop="width" content="560"></span><span itemprop="height" content="395"></span></iframe>

    • Update the embed code per below (note: the updated bits of code are in bold):

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"><div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe title="Your Title" src="your same link from generated embed code"width="100%" height="100%" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></div></div></div> 


Please contact your account manager or if you have any questions.

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk