Resizing sponsor-hosted Flash videos dynamically?

[Simon]

PROBLEM: How to make sponsor-hosted Flash movies resize themselves when the widow size changes.

--

I'm a big fan of the kinds of fluid design which allow a page to resize some of its elements to accommodate various screen sizes and resolutions, and to allow for the fact that users will often resize their browser windows to whatever size they want at that moment.

Scaling header and page graphics is pretty easy, and using CSS to hide some overflows is useful for small window sizes, but there's one thing I'm having a lot of trouble with.

The problem is trying to figure out a way to dynamically resize the new sponsor-hosted embedded Flash videos which have content that plays right on your page. Most of them seem to be called by Javascripts, which gives me much less to work with as far as CSS manipulation is concerned (at least the things I know how to do).

What I want to do is be able to resize a browser window and have the Flash movie player also resize itself the way that .png, .jpg and .gif graphics resize.

Here's a page with some test examples:
http://cashfetish.com/smn/tests/resizing-tests.html

The Flash movie at the top doesn't resize when you change the browser window size like the other graphics on the page do.

Maybe I'm missing something really simple but I've looked for an answer to this for a couple of days with no luck. The only things I've run across were some ways to resize a Flash movie that you created and have on your own server where you can add code to the Flash file itself. Not an option when you're using sponsor-hosted Flash movies/players.

So... anyone solved this puzzle before?

Or anyone have some ideas to try?

Anyone..?



.

[HarryM]

This does, but it's weird.

Take the flash object out of the div container & try

<style type="text/css">
div {width:33%;float:left;}
img {width:98%;}
object {width:33%;height:33%;}
</style>

[Simon]

Thanks, Harry, I hadn't tried it that way.

Actually I did try it with embed {width:100%;} and that has a similar effect. Still can't get dynamic resizing this way, but the content does resize when the page is reloaded at least.

Unfortunately the video loop playing in the MovieRoom Flash banners doesn't get resized by either method, only the black background changes size.

Still searching but don't see much hope on the horizon for any simple way to do this.

[Useless]

You need to add:
embed {width:33%; height:33%;}
to what Harry already gave you. That will allow some resizing, but those flash ads won't look right.

[Simon]

Thanks UW... it was your post about MovieRoom's new Smart banners that raised this question for me.


The Flash ads will actually sit inside sidebars in the real layout, so it's not really an exact 33% size that I'm after. I think I posted too simple an example page. What I'm trying to do is have the Flash ads resize to 100% of the enclosing container, in this case a division tag.

I'm addressing both 'embed' and 'object' in my stylesheet. What I did is make a div with an id="flash_ad" to hold the content and then set the embed and object selectors in that div to 100% width in my stylesheet. It does give the illusion of resizing with some Flash ads, like the MovieRoom ones, and it works a little better with embedded Flash videos from some other sponsors. Not dynamic resizing, but resizing on window reload at least.

Here's the new test page with a few examples of what works and doesn't. I found that setting height to 100% in this case is a bad idea, as you can see.

http://cashfetish.com/smn/tests/resizing-tests2.html



.