Make JW Player Width/Size Responsive

+1

subscribe

Yes, Please.

Hello! I've installed jw player and fitvidsjs but it seems not working for me... Anyone can help me please?

You might need to tweak your css widths to include width as a % value for jwplayer's container in order to use fitvids. Look at the docs in fitvids for how to apply it to things that aren't in iframes.

did anyone manage to do this yet?

thanks

Look at the docs in fitvids for how to apply it to things that aren't in iframes.

@ btopro - do you meant the README.md here https://github.com/davatron5000/FitVids.js ?

Thanks

I just meant to check that technique out; from looking at the docs it seems like they are putting emphasis on this in 5.10+ so I'm just going to wait til then to deal with it.

@ btopro ok thanks - anyway what about applying media queries to the jw player wrapper in the CSS - would that work to make jwplayer responsive without the need for fitvidsjs?

thanks

I have figured out a way. Its a really ugly hack but it works.

**** The good part... ****

Install Video module and set it up. I had to use Zencoder for example.

Patch the Video module

http://drupal.org/node/1692320

and patch JW player

http://drupal.org/node/1807710#comment-6578614

Also apply the patch for JW player 6

http://drupal.org/node/1845744

and finally the Video field formatte patch

http://drupal.org/node/1807710

**** The bad part ****

You will find that if you use EITHER video OR file field for jw player you don't get the proper responsive HTML5 player. when you right click the player you get the flash-like link to longtailvideo...and you can't get it to behave responsive, not even with css as it requires a pixel value for the height.

**** The ugly part ****

Create an empty .mp4 file (i.e. run "touch nothing.mp4") and use that as the default value for the FILE field.

Hide the file field jw player with CSS.

***** The awesome part *****

You now have responsive JW player

Now... maybe some enlightened individual could come up with why JW player doesn't load properly unless done in this potheaded way?

Well...crap... I just realized that File Field doesn't accept a default value... back to the drawing board.

Current megadodgy workaround:

Using the file field sources I put the 0 byte mp4 file in the videos directory in the files dir and renamed the file to 0nothing.mp3 and then it appears in the top of the list when i pick the file on the server. Works as an extra step until i figure out how to set a default value on the file field.

This is now beyond me I'm afraid...

filefield_sources_noupload

helps a little bit... except the autoselect the first file in the list javascript doesn't work... if that would work this hacky patch could be disclosed from the user at least until there is a working solution for the responsiveness issue...

can someone more fluent than me in coding modules fix this?

there is a patch for D6 in the issue queue for this module that will explain which code does that JS trick, its the same code pretty much in the D7 port.

Why not just use the built-in responsive functionality of JW Player (http://www.longtailvideo.com/blog/32697/new-in-jw-player-responsive-design/)?

That would be more logical to implement, IMHO.

Just use JW Plaver 6.x, override the template file, and put the necessary config parameters in a preprocess function.

Has this functionality been achieved yet? Love JW Player but responsiveness is a must

@ DrupalNovice re #15 are you theorising here or have you actually done this successfully?

Thanks...

Juc1, you did look at the LongTail/JW Player examples right? They had working examples for JW Player responsiveness for JW Player 6.4+.

I do wonder what things look like in the player if you use Drupal and upload a widescreen and a 4:3 video to the same field since with that new responsive feature you have to set an aspect ratio as well as width = 100%. Is there a way to dynamically set the aspect ratio when the playlist changes to a new video file?

I opened an issue to support JW Player 6 Responsive Design option in the 7.x-2.x branch, see #2183119: Support JW Player 6 responsive layout (% based width and aspect ratio).

Marking this as a duplicate since I assume that it has been solved by #2183119: Support JW Player 6 responsive layout (% based width and aspect ratio).