Kaltura - Fluid Width Video [UW-Madison]

This is a tutorial for more advanced users which describes how to modify Kaltura embed code to make the video's width scale to the size of the container or webpage in which it is embedded. Content in this tutorial was borrowed from CSS Tricks's post, Fluid Width Video. Often if students want to view a video larger they'll click the "Full screen" button the player. Video dynamically scaling may not be worth the extra work it takes to get but we're providing the info for those who may find it of use.

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. If you embed video using this method in your course no detailed analytics will be gathered on student viewing.

  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 a Link or Embed Code to a Video 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.

An animated GIF first showing a video embedded using the fluid width HTML from above and then a video embedded via the regular method.



Keywordscss, style, div, class, html, responsive, scale media   Doc ID72065
OwnerLearn@UW MadisonGroupLearn@UW-Madison
Created2017-03-27 14:13:52Updated2023-02-08 13:22:17
SitesLearn@UW-Madison
Feedback  0   0