How to make JW Player 5.10 responsive

Update: 8 September 2016. JW Player 5.10 is not responsive on its own as opposed to JW Player 6.x, but there is away to force the player to re-size according to the width of the browser window. Therefore, if you hesitate to move to JW Player 6 or 7 due to the dramatic changes in the embedding code the required yearly renewal fee, here is a step by step tutorial how to do this.

If you followed the tutorials in Working with JW Player, you understand the the embedding code above, although it is important to emphasize that this is version 5;10 code, not for version 6 or 7.
In the code above, there is a difference with the other tutorials about version 5.x, namely that width and height are set to 100%.
On its own, this embedding code does not work. The player will re-size to 100% width, but the height does nothing for us currently, therefore the player will not show at all.
So, we need to add two wrapper divs before the player shows up:

The first div should have a relative position, while the second div has an absolute position. As you can see, both divs have the width and height set to 100%. You could set this to another value, but generally, you will want to use 100%, so that the player scales within page as big as possible.
In the first div, the padding-bottom regulates the height of the player which should be in relation to the aspect ratio of the video.

In the example above, this is set to 56.25%, which corresponds to the format of a HD video.
How did we get to this awkward value? A HD video has an aspect ratio of 16:9. This means that the relationship between width and height is 16 to 9.
To get the value you need, you use this formula to calculate the correct value:

(height / width) * 100 or: (720 / 1280) * 100 = 56.25
You could also have an SD video, which has an aspect ratio of 4:3.
For example: if your video is 400 pixels wide and 300 pixels height, this gives (300/400) * 100 = 75
So, you set the padding-bottom to 75%.
Using our example above, we have now his:

This way, you can serve a HD video for desktops while using a lighter version for mobiles.

For Joomla and Drupal, it is best to work with a plugin because those CMS tend to strip embedding code from their editor. (Miracle Tutorials uses S3Media Stream with JW Player 5.10).

If you have any questions, leave a comment below and we respond as soon as possible.
If you think this tutorial is useful to others, please share it via Facebook or your favorite social media platform.