Tutorial Guide for JW Player video player set up for responsive design

Loading the player...

To scale a JW Player video to fit any browser, tablet or mobile device for responsive design you need to change some of the video code.

Initial Set Up

To kick start JW PLayer you need to create an account then download the latest player, 7.5, and copy the jwplayer folder and contents to your web root and reference the Javascript player files required in the <head></head> of your document, add in your correct JW Player key if you have one, if you don't just omit the line.

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="ABCDEFGHIJKLMOPQ";</script>

Next generate your code, JW Player code sample or just use this format and edit your size and source to suit

<div id="myvideo5">Loading the player...</div>

<script type="text/javascript">
    jwplayer("myvideo5").setup({
        file: "http://mydomain/mymovie.mp4",
        image: "http://mydomaincom/muposterpic.png"
    });
</script>

Place the code on your page to use as a regular fixed size video - too make responsive read on....

Making JW Player videos scale in all browsers, tablets and phones for responsive design

The Process

To get this going for responsive design is quite simple; you need to add into the JW Player code a width and aspectratio value. The width value is 100% and the aspect ratio value depends on the aspect of your video, most are 16*9, but others will vary.

<div id="myvideo5">Loading the player...</div>

<script type="text/javascript">
    jwplayer("myvideo5").setup({
        file: "http://mydomain/mymovie.mp4",
        image: "http://mydomaincom/muposterpic.png",
        width: "100%",
        aspectratio: "16:9"
    });
</script>

Now we need to sort out the containing div to make it fluid, this page example has a containing div with a max-width(px) and width(%) value set. The container div.videocontent has 2 CSS declarations for width, it has a width:80% and a max-width:640px.

It has the main width set to 80% as then it will keep it's width in proportion to its parent container when scaling, you need to find the percentage figure that works in your design.

I also don't want the video displayed any wider than 640px, so that's why the max-width is set to 640px.


 .videocontent {
	width:80%;
	max-width: 640px;
	margin: 0 auto;
}

Fixing the Flash Fallback Position in Firefox & Opera

Since an mp4 is passed in as the source, flash will be used in non-mp4 browsers such as Firefox and Opera, just a snippet of CSS is needed to fix the positioning of the video which may appear off center, the left position is the issue and needs to be added in CSS as 0.

object {
position:absolute;
top:0px;
left:0px;}

That's it, JW Player should be responsive, below are some plugin extensions for the main CMS systems.