Topics Map > Media Delivery > Kaltura > MediaSpace > Media Sharing

Kaltura - Fluid Width Video (UW-Madison)

This is an advanced tutorial for modifying Kaltura embed code to make the video's width scale to the size of the container in which it is embedded. This is one option for scaling embedded Kaltura videos so they display nicely on phones and tablets. Content in this tutorial was borrowed from CSS Tricks's post, Fluid Width Video.

WARNING: This tutorial requires some knowledge of HTML and CSS. You will be modifying HTML directly. These instructions are meant as a suggestion. You may need to modify the HTML in your site to make it work better.

  1. Create a new div inside the webpage in which you will be embedding your video. The div should look something like this:
    <div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;">[Kaltura embed code will go here]</div>
  2. Copy embed code for your video by following the tutorial in this KB doc: Kaltura - How to Get Embed Code in MediaSpace (UW-Madison). Your embed code should look something 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_rl4tg8ta&flashvars[streamerType]=auto&amp;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;&wid=0_f08whc40" width="649" height="401" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" title="Kaltura Player"></iframe>
  3. Paste your embed code into the div you created in step one. Your embed code should replace [Kaltura embed code will go here].
  4. Modify the Kaltura embed code you just pasted. Add style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" after "iframe ". Your code should now look like this:
    <div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 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_rl4tg8ta&flashvars[streamerType]=auto&amp;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;&wid=0_f08whc40" width="649" height="401" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" title="Kaltura Player"></iframe></div>
  5. Your video should now scale to the width of the container in which it was embedded. If you embedded this on a page, the width will scale to the page. If you embedded this in another div, it will scale to the width of the div.

Using a Style Sheet Instead This tutorial uses inline styles, but you may want to make these styles universal for your site using a style sheet. You can do these same styling techniques using a style sheet. For more information on how to do this, please look at the original post that was the inspiration for the above tutorial: Fluid Width Video

NOTE: By default, Canvas will scale embedded Kaltura videos. In the following image, the video on top was embedded using the method outlined in this document. The bottom video was embedded by copying and pasting unmodified Kaltura embed code. Notice the scaling differences between the two.

Embed-Modifiedvs.Default.png




Keywords:css, style, div, class, html, responsive, scale   Doc ID:72065
Owner:DoIT AT Media Delivery Support .Group:Learn@UW Madison
Created:2017-03-27 14:13 CDTUpdated:2017-03-27 15:11 CDT
Sites:Learn@UW Madison
Feedback:  0   0