Minimal Fitvid example

FitVids.js example

FitVid maintains player embed size aspect ratio, using JS to apply RWD padding-top technique. More about FitVids.js
Also see kaltura's no-js RWD example

Note: Changes are needed for fitVid to work against kWidget.embed fork available here.

Sample FitVids.js with kWidget.embed Code:
  1. <script type="text/javascript" src="resources/FitVids.js"></script>
  2. <div class="contentContainer" style="width:80%;height:900px;border:solid thin black">
  3. <h3>Page content in dynamic width content column. </h3>
  4. <div class="fluid-width-video-wrapper">
  5. <div id="myVideoContainer" style="width:640px;height:360px">
  6. <div id="kaltura_player" style="width:100%;height:100%"></div>
  7. </div>
  8. </div>
  9. </div>
  10. <script>
  11. kWidget.embed({
  12. 'targetId': 'kaltura_player',
  13. 'wid': '_243342',
  14. 'uiconf_id' : '12868012',
  15. 'entry_id' : '1_sf5ovm7u'
  16. });
  17. </script>
  18. <script>
  19. $(".contentContainer").fitVids({ customSelector: "#myVideoContainer"});
  20. </script>

Dynamic width content column.


FitVids vimio video ( retains fitvid auto fitting ):
html5 qunit | flash qunit