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?
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.
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.
@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.
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?
bc.. <!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>
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
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.
bc.. 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.
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!
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.