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

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.

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 -->

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?

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.

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

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.

Pablo

JW Player Support Agent  
0 rated :

@Jack -

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

JW Player

User  
0 rated :

I'm having the identical problem.


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

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.

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.

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?

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?

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.

Pablo

JW Player Support Agent  
0 rated :

@Sean -

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

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.

JW Player

User  
0 rated :

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

Pablo

JW Player Support Agent  
0 rated :

@hailang444 -

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

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

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.

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.

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...

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.

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.