How to toggle a background image placeholder using jPlayer

I have a page on my site that uses jPlayer to play videos, simple stuff. However i'm tasked with replacing the white/blank placeholder that appears before the video plays with our company logo in as fluid a fashion as possible.

I have seen the poster attribute in the jQuery but haven't been able to manage to make it look remotely tidy, the box resizes once the player starts.

Any insight would be much appreciated, even a pointer in the right direction

Thanks

Solution

So you got it to work, but it doesn't look good? Can you load screenshots / provide an example of the code?

Here's an example how to specify a poster image to jPlayer:

$(this).jPlayer("setMedia", {
  title: "Big Buck Bunny Trailer",
  m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
  ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
  poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});

Also make sure the poster image is of the same ratio as your video (e.g. 16:9)