Ooyala responsive embedding

ooyala.css

.video-container{
  width: 100%;
  position: relative;
  padding: 56.3% 0 0 0;  //56.3% = 16:9 ratio
}
.video-container > .video{
	position: absolute;
	top: 0;
}

.video-container .innerWrapper{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

ooyala.html

<div style="width:640px;">
  <div class="video-container">
    <div id='ooyalaplayer-[ooyalaid]' data-ooyalaid="[ooyalaid]"></div>
  </div>
</div>

ooyala.js

$(function () {
  
  $('[data-ooyalaid]').each(function () {
		var ooyalaid = $(this).data('ooyalaid');
		var containerid = $(this).attr('id');
		var ooyalaplayer = OO.Player.create(containerid, ooyalaid);
    
    //reference point for use later
		$(this).data('ooyalaplayer', ooyalaplayer);
	});

});

Thank you for this! Very clever padding trick (may want to update the comment syntax to /* 56.3% = 16:9 ratio */)

Can someone help me out with this? I have no business being on github, but I would love to use this code. Obviously, if I create these three files as-is, they won't do much - what else do I need to have loaded in order for this to work?