Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

100% width not working with html5?

Hi all, I've been trying for a couple of days now to get an html5 mplayer to work @ 100% width & am thinking maybe this is just isn't possible! I need my video to be 100% wide & scale proportionately within a container div. I'd followed Shawn's example here: http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/20307/player-heightwidth-set-as-100 but for some reason it seems as if the player always defaults to the Flash version - which iPads can't display.

I already have a blog in Wordpress using the plugin & that seems to work fine on the iPad. Maybe it's because the dimensions are pre-specified?

Doe anyone know of a way to hard-code the player to force html5 playback?

Thanks!

23 Community Answers

Up Down

JW Player

User  
0 rated :

@deeve
a link would be most helpful

also check out the following meta command which I believe may be good to have present.
<meta name=viewport content="width=device-width, initial-scale=1.0">

I havent worked with iPhone or iPAD mainly cause I dont have them but I will in the future.

Up Down

JW Player

User  
0 rated :

@Willie
It's actually a client's site so will provide code instead for now if ok with you. I had read somewhere on here a bug report was launched on this matter & there was some code generated as a fix. I'm just not sure as to where I should place this? It's the 2 'If' clauses below:

bc.. <div class="video-wrap">
<video id="jwplayer-1">
<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("jwplayer-1").setup({
flashplayer: "/jwplayer/player.swf",
file: "path/to/my/video/file/.mp4",
width: "100%",
height: "100%",
skin: "/jwplayer/skins/nacht.zip",
autoplay: "true"
})
if (typeof config.width == "string" && config.width.lastIndexOf("%") > -1){
percentage = parseFloat(config.width.substring(0, config.width.lastIndexOf("%"))) / 100;
config.width = Math.round(container.parentNode.getBoundingClientRect().width * percentage);
}

if (typeof config.height == "string" && config.height.lastIndexOf("%") > -1){
percentage = parseFloat(config.height.substring(0, config.height.lastIndexOf("%"))) / 100;
console.log(container.parentNode.getBoundingClientRect());
config.height = Math.round(container.parentNode.getBoundingClientRect().height * percentage);
};
</script>
<!-- END OF THE PLAYER EMBEDDING -->
</div>
</div><!-- /.video-wrap -->

Up Down

JW Player

User  
0 rated :

..looking @these 'If' statements again, they look as if they'd belong more within the jwplayer.js file itself ..if so, would you have any idea where?

Up Down

JW Player

User  
0 rated :

I'm facing the same problem.

When the width and height are set to 100%, they player is not showing the html5 version, and also the flash player is not showing in firefox and ie.

Up Down

Pablo

JW Player Support Agent  
0 rated :

@Jack -

Try out the latest build of the player and see if you still can’t set percentage widths in HTML5 mode.

http://developer.longtailvideo.com/trac/browser/trunk/fl5

Up Down

JW Player

User  
0 rated :

Hello Pablo,

Just checked with the latest version in the trunk, and it's still the same.

I'm also facing this problem while creating an new embed code for a client.

Hope you can fix it soon.

Thanks,
Jack.

Up Down

Pablo

JW Player Support Agent  
0 rated :

@Jack -

Please post a link which demonstrates the issue and I can take a look.

Up Down

JW Player

User  
0 rated :

I'm having the identical problem.


http://www.transcanada.com/php/media/studentvideo/index2.html

Up Down

Pablo

JW Player Support Agent  
0 rated :

@Trevor -

Try using the latest build of the player from trunk:

http://developer.longtailvideo.com/trac/browser/trunk/fl5

There have been some bug fixes around since the last official player release.

Up Down

JW Player

User  
0 rated :

Hi,

Is this issue solved yet? If I set my player with a width & height of 100% this works in flash but in HTML 5 it sets a fixed width in pixels on the video element, the toolbar and some more. It takes the width of the window for this..

I've just updated to the latest (5.9) version of the player and js file.

Up Down

JW Player

User  
0 rated :

I just checked again, and it does work because it dynamically changes the sizes when I resize my window. The only problem is that it does the resizing based on the screen width instead of the container element.

The container element has position: absolut and height&width 100%. The relative container has an width:100% and padding-top:56.25% (16-9).

Is this expected behavior?

Up Down

Pablo

JW Player Support Agent  
0 rated :

@Jelle -

It should be sized relative to its parent, but somewhere in the parent tree, an element must be absolutely sized for this to work. This is an issue we’re aware of.

Do you have a sample page which demonstrates the issue you’re having?

Up Down

JW Player

User  
0 rated :

Hi.

I'm having the same problem when trying to embed Videos on a mobile page - which is made for all sorts of devices - so we can't use an absolute width in css.

Do you know when this issue will be fixed?

Sean.

Up Down

Pablo

JW Player Support Agent  
0 rated :

@Sean -

Do you have a sample page which demonstrates the issue you’re having?

Up Down

JW Player

User  
0 rated :

Hi Pablo.

Here is the Page I'm embedding the player on:
http://www.festwochen.at/index.php?id=228#trailer

The Problem is visible on iPhone - and also on Safari.

The Video Element doesn't inherit the width of the container (class="padding").

Thanks,
Sean.

Up Down

JW Player

User  
0 rated :

I'm having the same problem when trying to embed Videos on a ipad page

Up Down

Pablo

JW Player Support Agent  
0 rated :

@hailang444 -

Please post a link to the page you’re having trouble with.

Up Down

JW Player

User  
0 rated :

I've been wrestling with the same issue, and stumbled on the fact that if you use a DOCTYPE of HTML 4.01 Transitional, using 100% width and height seems to work properly! Switching to Strict or HTML5 breaks it in FF (no video shown at all) and IE9 (a small video), but it seems to work in Chrome.

A couple of demo pages:

http://earlyout.org/jwtest/WildlifeSTRICT.html

http://earlyout.org/jwtest/WildlifeTRANS.html

Up Down

JW Player

User  
0 rated :

BTW, even in the example that works, the "stretching" behavior is not consistent or reliable. Grabbing the viewport and doing some fast resizing often results in aspect ratio distortion, particularly if you make the viewport considerably shorter.

Up Down

Pablo

JW Player Support Agent  
0 rated :

@EarlyOut -

The way the player is currently constructed, if it’s not able to detect its parents’ dimensions, it can’t be sized using percentages. If you place the player inside of a sized container, your example should work.

Up Down

JW Player

User  
0 rated :

Odd that it would work with a transitional DOCTYPE, however.

But doesn't a sized container sort of defeat the purpose? If you're targeting mobile devices, starting with a container of a fixed size is kind of a problem, isn't it? I would expect the script to detect the size of the viewport, if nothing else.

I've tried fiddling with a parent with 100% height and width, but that doesn't seem to have any effect, so it appears that fixed dimensions are needed.

For now, I'm stuck with the old Flash solution, using the "abandoned and just one browser update away from breaking forever" swffit.js script. And that's useless in the iPad world. Makes me a bit uneasy...

Up Down

Pablo

JW Player Support Agent  
0 rated :

@EarlyOut -

I agree; it’s not ideal. We’ll be looking to significantly upgrade the player’s HTML and CSS structure in the next major release (v6). Until then, yes, Flash is your best solution on the desktop.

Up Down

JW Player

User  
0 rated :

OK, I'll stay tuned. Thanks for the quick response, in any event! It's much appreciated.

This question has received the maximum number of answers.