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.
For those of you who never worked with JW Player before, there are various tutorials available to embed videos and audios on your site in the category Working with JW Player. Check out specifically: How to Embed Streaming Video & Audio with HTML5 Fallback – using JW Player 5.6
Here we set up a basic video with HTML5 fallback, like this:
<script src="/jwplayer/jwplayer.js" ></script>
<div id="container1" >Loading video...</div>
<script type="text/javascript">
jwplayer('container1').setup(
{
'id': 'container1',
'wmode': 'transparent',
'icons': 'true',
'allowscriptaccess': 'always',
'allownetworking': 'all',
'file': 'http://www.yourdomain.com/myvideo.mp4',
'width': '100%', 'height': '100%',
'controlbar': 'over',
'dock': 'false',
'modes': [
{type: 'flash', src: 'http://www.yourdomain.com/jwplayer/player.swf'},
{
type: 'html5',
config: {
'file': 'http://yourdomain.com/myvideo-small.mp4',
'provider': 'video'
}
}
]
});
</script>
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:
<div style='position:relative;width:100%;height:100%;padding-bottom:56.25%;'> <div style='position:absolute;width:100%;height:100%;'> embedding code... </div> </div>
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.
<div style='position:relative;width:100%;height:100%;padding-bottom:56.25%;'>
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:
<script src="/jwplayer/jwplayer.js" ></script> <div style='position:relative;width:100%;height:100%;padding-bottom:56.25%;'> <div style='position:absolute;width:100%;height:100%;'> <div id="container1" >Loading video...</div> <script type="text/javascript"> jwplayer('container1').setup( { 'id': 'container1', 'wmode': 'transparent', 'icons': 'true', 'allowscriptaccess': 'always', 'allownetworking': 'all', 'file': 'http://www.yourdomain.com/myvideo.mp4', 'width': '100%', 'height': '100%', 'controlbar': 'over', 'dock': 'false', 'modes': [ {type: 'flash', src: 'http://www.yourdomain.com/jwplayer/player.swf'}, { type: 'html5', config: { 'file': 'http://yourdomain.com/myvideo-small.mp4', 'provider': 'video' } } ] }); </script> </div> </div>
This should do the trick. If you have a responsive theme/template, the player will now shrink or enlarge according to the width of the browser window.
You can give those divs a class and set the styles in the header instead of inline like I did. This is recommended because if you have many videos on your site, it reduces the amount of code.
For those of you who are not acquainted with the Flash and HTML5 fallback modes, in the example above, I have set different videos for desktop computers and mobile devices:
'file': 'http://www.yourdomain.com/myvideo.mp4',
is the video for desktops using Flash, while the html5 video is set to another video that is smaller:
{
type: 'html5',
config: {
'file': 'http://yourdomain.com/myvideo-small.mp4',
'provider': 'video'
}
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.
