Kaltura - Fluid Width Video [UW-Madison]
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.
- 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> - 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&flashvars[localizationCode]=en&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=0_f08whc40" width="649" height="401" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" title="Kaltura Player"></iframe> - Paste your embed code into the div you created in step one. Your embed code should replace [Kaltura embed code will go here].
- 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&flashvars[localizationCode]=en&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=0_f08whc40" width="649" height="401" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" title="Kaltura Player"></iframe></div> - 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.
