Making jPlayer resize to browser size (background video)

[Frank Stepanski]

Hi,

Im looking for any help in trying to figure out how to resize the video to make it fit the entire screen. I know it can be done since I've seen a site use this technique.

http://www.maerskfleet.com

I know, you can use native HTML5 video with the jQuery Backstretch plugin: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

But would love to know how to use it with jPlayer.

Any help would be appreciated.

Thanks,

Frank

[Mark Panaghiston]

They use jPlayer for the audio... But not for the video by the look of it... But should be able to do it if you plug in the right values in either the size option or the CSS for it.

This is not the source, but the generated HTML viewed in Firebug (Well I assume it is generated or OGV limits browsers that work.):

<div id="videoContainer">
  <video id="backgroundVideo" preload="metadata" autoplay="" tabindex="0" style="display: block; visibility: visible; min-height: 576px; min-width: 980px; top: 0px; left: 0pt; position: absolute; height: auto; width: 100%;" src="media/video/light/0_intro.theora.ogv"></video>
</div>


#videoContainer {
display: block;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}

element.style {
display: block;
height: auto;
left: 0;
min-height: 576px;
min-width: 980px;
position: absolute;
top: 0;
visibility: visible;
width: 100%;
}

So follow similar structure and rules... and set the jPlayer options to:
size: {
  width:"100%",
  height: "auto"
}

It should work just the same... But that plugin you mention (jQuery Backstretch) might be doing other stuff not obvious when only viewing on Firefox 6. ie., It might use difference CSS rules on other browsers... But give it a go and see.

[Mark Panaghiston]

They do not use backstretch... That only seems to work with images btw.