Loading a JW player on a hidden element

Question

I use JW Player to display Flash videos (although it will soon have HTML5 sources that the browser supports).

Until the user takes action on the page, the video must be invisible (but uploaded). After they take this action, a video div will be shown, and I would like to play() video as soon as possible.

Here is my setup() call. <div id="video"> is hidden in my CSS file, just like JW Player <div id="video_wrapper"> (both originally set to display: none; ).

 jwplayer("video").setup({ playlist: [ { sources: [ { file: 'http://example.com/video.flv' } ] } ], controls: false, wmode: 'transparent' }); 

And after a while I do this:

 $('#video').show(); $('#video_wrapper').show(); jwplayer().play(); 

I do not get any errors in the console, and the video plays normally unless I first hide the containing div in my CSS file.

Doesn't JW Player run its setup() method on a hidden element? And, if not, how should I achieve the desired result?

Answer 1

See if the solution works here:

Unable to play sound when JWPlayer is hidden

Place the containing div so that it is no longer visible, and then call the settings function on it. Your display function should be a little more complicated in order to change the display settings to the way you want.