Forums

JW Player
/
JavaScript Interaction

100% width/height not working

13 replies [Last post]
Posted: Fri, 2008-05-02 13:18 JFD
Anonymous's picture

I'm trying to get the Image Rotator to fill a div using 100% width and height. I found this thread, http://www.jeroenwijering.com/?thread=9967, and followed AJAXs instructions (sans the js function I don't need). The player scales fine in IE but is shrunken in Safari & FF.

If I add so.addVariable('height','100%'); and so.addVariable('width','100%'); to address non-IE browsers, width appears to be 100%, but not height, and the player won't load any images.

How do I get Image Rotator to scale to fit in all modern browsers?

Posted: Fri, 2008-05-02 16:27 checkMate  
Anonymous's picture

Use swfobject v2.0

The second/additional width & height is specifically for IE, but not needed with swfobject v2.0 & 100%.

Posted: Sun, 2008-05-11 23:40 JFD  
Anonymous's picture

Ok, I finally got around to testing SWFObject 2.0. Unfortunately the same problem exists. The follow js works in FF & Sarari:

<script type="text/javascript">
      var flashvars = {};
          flashvars.file = 'madrid.xml';
      var params = {};
          params.allowscriptaccess = 'always';
      var attributes = {};
      swfobject.embedSWF('imagerotator.swf', 'container', '100%', '100%', '7.0.0', false, flashvars, params, attributes);
</script>

In IE, the rotator itself is 100% width/height but the images/controls or "display area" is confined to a much smaller space in the upper left corner. Overstretch doesn't help. Adding flashvars.width = '100%'; flashvars.height = '100%'; completely breaks the rotator in all browsers since it seems that percent is not a supported value for these flashvars.

I've seen a couple demos that are able stretch the media player full window but this technique seems to be dependant on s.addVariable("displayheight","9999"); which the rotator does not support. And no, flashvars.width = '9999'; flashvars.height = '9999'; doesn't work either. Here's the links:
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/fullscreenfire.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/sizediv.htm

I welcome anyone's working example that stretches the Image Rotator 100% height/width.

Posted: Mon, 2008-05-12 00:52 positionMarker  
Anonymous's picture

In my re-sizing demos, where I'm using 100% width and height in the swfobject.embedSWF() call, I've noticed that sometimes, on first load, the player doesn't resize to the container div.

However, as soon as you have re-sized the div once, then the player behaves and re-sizes to the container div, no matter what size you make the container div.

So, as a work around, I propose that you resize the player immediately after it is loaded, then resize it again.

It may take a few tries to get this right, so there isn't a lot of flashing while the player is loading.

Posted: Fri, 2008-06-06 09:26 Nate  
Anonymous's picture

@JFD - I'm having this exact problem, and have tried everything you mentioned. I'm using swfobject 2.0 and the latest mediaplayer.swf - resizes perfectly in FF, but in IE it's sizing the black flash area correctly but only playing back in the top left corner.

Did you get yours solved?? How?

Posted: Fri, 2008-06-06 10:34 andersen  
Anonymous's picture

@Nate - are you playing a .swf file or a .flv or maybe a .mp4 video file ?

if you are playing .swf please see these threads:

http://www.jeroenwijering.com/?thread=10658
http://www.jeroenwijering.com/?thread=10928

Posted: Fri, 2008-06-06 12:15 Nate  
Anonymous's picture

I'm trying to embed mediaplayer.swf, and passing it an .flv file. My latest test loads, waits two seconds, and tries to resize. It's currently breaking in FF, I don't have IE to test. The .flv file has good metadata as far as I can tell, if there anything else wrong in this doc you can see?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resize test</title>
<script type="text/javascript" src="/js/swfobject/src/swfobject.js"></script>
<script type="text/javascript">
function resize() {
  document.getElementById('av_3086_20413').style.width="640px";
  document.getElementById('av_3086_20413').style.height="480px";
}
setTimeout (resize,2000);
</script>
</head>
<body>
<div style="width:320px; height:240px;" class="inline_media" id="av_3086_20413"><div id="fl_av_3086_20413"></div></div><script type="text/javascript">swfobject.embedSWF("/media/mediaplayer.swf", "fl_av_3086_20413", "100%", "100%", "8.0.0","expressInstall.swf",{file:"/media/3086/3086.flv"},{},{})</script>
</body>
</html>

Posted: Fri, 2008-06-06 12:39 andersen  
Anonymous's picture

only the usual problem that the embedding script is right in the middle of the body of the page...
a better practise is to have all script in the head and triggered by the onload handler -

please see the source of the minimal_but_safe demo from the demo page for an example of this
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/minimal_but_safe.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer
(it uses the swfobject v1.5 - but the function structure would be the same)

by creating the player proper onload instead of inline - it should not be needed to wait and resize at all !
(for the sake experiment maybe also try setting width and height flashvars also)

i havent had much experience with swfobject2 yet though (waiting for v.4 to come out of beta) so im quite curious if this will do
else you might have to rollback to swfobject v.1.5

Posted: Fri, 2008-06-06 13:42 Nate  
Anonymous's picture

Thanks for the reply. I had tested against swfobject 1.5 for a while and wasn't able to get what I needed, but I've got a test working at least in FF... I'll try it against IE when I get home.

function loaded() {
var s = new SWFObject("/media/mediaplayer.swf","playerID","100%","100%","8");
// s.addParam("allowfullscreen","true");
s.addVariable("file","/media/3086/3086.flv");
// s.addVariable("width","400");
// s.addVariable("height","245");
s.addVariable("displayheight","9999");
//s.addVariable("overstretch","fit");
s.write("av_3086_20413");
}
</script>
<style>
html,body { height:100%; width:100%; }
#av_3086_20413 {
height:100%;
width:100%;
}
</style>
</head>
<body onload="setTimeout(loaded,1000)">
<div id="av_3086_20413">something</div>
</body>
</html>

I also tested it with inline JS and that seems good, so maybe I'm close. Fingers crossed for IE. If I get a good solution I'll return and post it here... Thanks again.

Posted: Fri, 2008-06-06 13:49 andersen  
Anonymous's picture

<body onload="loaded()"> should do...

onload only fires after the whole page has finished loading (onloaded would have been the more correct name)

Posted: Fri, 2008-06-06 19:50 Nate  
Anonymous's picture

Got it. Seems the downgrade to swfobject 1.5 is a big part of the key, but for future reference here's the magic combination I'm using:

swfobject 1.5, mediaplayer 3.16

I'm keeping the inline JS since it makes my life easier and seems to work fine:

<html>
<head>
<style>
html,body { height:100%; width:100%; }
#av_3086_20413 {
height:100%;
width:100%;
background:#f00;
}
</style>
</head>
<body>
<div id="av_3086_20413">something</div>
<script language="JavaScript">
var s = new SWFObject("/media/mediaplayer.swf","playerID","100%","100%","8");
s.addVariable("file","/media/3086/3086.flv");
s.addVariable("displayheight","9999");
s.write("av_3086_20413");
</script>
</body>
</html>

Adding width and height with percents to the flashvars seemed to massively break things, so I pulled them out. The displayheight matters, as does the containing div's width and height: that is, whatever contains av_3086_20413 had better be as big as you want the video to be. In this example, as big as the browser window, and resizing works as expect (even via javascript).

Thanks for the pointers, I was about to rewrite the whole thing and start re-embedding the player after every resize!

Posted: Tue, 2008-06-10 11:20 JFD  
Anonymous's picture

I assumed this thread was dead but I still should have followed up with the solution. Anyhoo...

Nate,

Looks like you figured it out. I ended up going the SWFObject 2.0 route because the 1.5 method wasn't satisfying IE, FF and Safari. But then I don't think I ever tried the CSS 100% height trick until I had already switched to SWFObject 2.0. It could be that 1.5 works just as well with this technique.

Posted: Thu, 2008-06-19 12:51 Matt  
Anonymous's picture

I found a way to do it. You can see the solution I did here:

http://www.jeroenwijering.com/?thread=11160

I got it working in both IE and FireFox.

Posted: Wed, 2010-03-24 08:25 ^^^^  
Anonymous's picture

-never mind-

  • Locked