Styling and Sizing JWPlayer Audio Player based on percentage

Question

I'm trying to setup a JWPlayer audio embed, based on this article.

It says to set it up like this:

<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
    file: "//example.com/uploads/myVideo.m4a",
    width: 640,
    height: 40
});
</script>

This works fine, except I want the height to be 100%, not pixel-based.

On the JWPlayer Configuration Reference, under the "Appearance" section, it says 'The desired width of your video player (In pixels or percentage)'.

If you take a look at my codepen, you'll see that the 100% width breaks the 40px height altogether. If you use the pixel width instead, it seems to work.

Because of the way this falls into my template, resizing with CSS isn't an option.

Any help would be greatly appreciated!

Answer 1

I was actually able to solve this by leaving the width empty:

width: "",
height: 40

Updated pen here: http://codepen.io/ericjacksonwood/pen/KNexme