Grow your CSS skills. Land your dream job.

CSS to help displaying Flash movie?

  • # February 5, 2013 at 3:07 am

    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

    # February 5, 2013 at 3:14 am

    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?

    # February 5, 2013 at 4:40 am

    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?

    # February 5, 2013 at 6:04 am

    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?

    # February 5, 2013 at 7:20 am

    Basically, similar to how this works:

    http://kinetictg.com/

    # February 5, 2013 at 7:34 am

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

    # February 5, 2013 at 7:39 am

    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.

    # February 5, 2013 at 7:52 am

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

    # February 5, 2013 at 10:54 am

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".