CSS to help displaying Flash movie?

[MarkQley]

Hi, I am trying to work something out but currently not sure best approach.

Scenario is as follows.

1) I have a centered container of 970px width. This consists of a header, main content and footer.
2) I have a Flash movie thats 2000px wide.
3) I want to have the flash movie showing full width of browser but centered. So if you close your browser to 970px wide you will see only 970px of the flash movies (2000px) but centered, then if you stretch the browser wider you will see more of the flash movie (left and right, keeping it centered at all times)
4) I don’t want a horizonal scroll bar appearing (unless the browser is resized below 970px as you would expect).
5) Thats it! Is it possible to do via css. It sounds complicated now Im explaining it but I can sort of imagine it is doable, just not sure where to start!

Thanks,

Mark

[chrisburton]

Set it to 100% if you want it full width. I think fitvids.js might be a solution for you.

Maybe I wasn’t understanding when I wrote the above. To clarify, you want the video to be the full width of the browser even when its container is at a set width?

[Paulie_D]

I guess you could hide the scrollbar below 970px and make them re-appear with a media query.

Frankly, a 2000px wide flash object is, it seems to me, just a bad idea in general. Surely that’s going to use a huge amount of memory/resources?

[MarkQley]

Hi Chris, not sure that will work for what I need really. The idea being is that if you have a larger resolution you will see more of the flash movie. But the movie actual size won’t change, just the viewable area of the movie will grow.

I don’t see a problem with having a larger flash movie if I keep the file size of the swf down Paulie, but I could be wrong?

[MarkQley]

Basically, similar to how this works:

http://kinetictg.com/

[Paulie_D]

Here you go:http://codepen.io/Paulie-D/pen/zsBlD

[Paulie_D]

However, from what I can see from the site you linked, they just have a few 100% width divs with internal centered divs set to a specific widths to hold the content.

[Paulie_D]

You could do the same with: http://codepen.io/Paulie-D/pen/dihbC

[MarkQley]

Great thanks Paulie. Thats exactly what I’m after.

[Author]

Posts