Minimal RWD self contained maintain 16/9 ratio

Resize the browser window and notice the player maintains 16/9 ratio.

Sample RWD code: 

  1. <!-- Outer div defines maximum space the player can take -->
  2. <div style="width: 60%;display: inline-block;position: relative;"> 
  3. 	<!--  inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
  4. 	<div id="dummy" style="margin-top: 56.25%;"></div>
  5. 	<!--  the player embed target, set to take up available absolute space   -->
  6. 	<div id="kaltura-player1" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
  7. 	</div>
  8. </div>
  9. <script>
  10. kWidget.embed({
  11. 	'targetId': 'kaltura-player1',
  12. 	'wid': '_{your partner id}',
  13. 	'uiconf_id' : '{your player uiconf id}',
  14. 	'entry_id' : '{your content entry id}'
  15. });
  16. </script>

Example of non-hover controls correction ( bottom:-36px; )



Sample RWD code: 

  1. <!-- Outer div defines maximum space the player can take -->
  2. <div style="width: 60%;display: inline-block;position: relative;"> 
  3. 	<!--  inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
  4. 	<div id="dummy" style="margin-top: 56.25%;"></div>
  5. 	<!--  the player embed target, set to take up available absolute space   -->
  6. 	<div id="kaltura-player1" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:-36px;border:solid thin black;">
  7. 	</div>
  8. </div>
  9. <script>
  10. kWidget.embed({
  11. 	'targetId': 'kaltura-player1',
  12. 	'wid': '_{your partner id}',
  13. 	'uiconf_id' : '{your player uiconf id}',
  14. 	'entry_id' : '{your content entry id}'
  15. });
  16. </script>
  17.
html5 qunit | flash qunit