Responsive HTML5 Video where aspect ratio can change

Responsive HTML5 Video where aspect ratio can change

I am trying to set up a HTML5 video player using video.js and Flat UI by
DesignModo. I have the problem that I need to make the video player
responsive, so the width needs to be 100%.
The problem is that then when this is set the height of the video is
always the same as you can see in this fiddle. So what I need (I think) is
a script which detects the aspect ratio as the aspect ratio will change. I
found a script like that over here however it is designed for iframe
videos like YouTube or Vimeo.
I attempted to modify the script by changing the value of $allVideos to
$("video[class^='video-js']"), but it does not seem to have worked. Can
anyone have a look at my Fiddle and try and tell me what's wrong and how
to fix it?



By the way, I know that the links to the font files and image(s) are
turning up 404, thats because at the moment the files are not hosted on my
server, I have just been testing them locally.