Masking a Flash Movie in HTML using a DIV
Jun
20
This is not something that is required in day to day development, but nether the less is definitely handy to know.
Due to the nature of embedded flash it does not seem possible to “mask” it using an overflow hidden on a containing DIV. This however is not the case.
By simply adding the following parameters a flash movie can be masked:
<embed src="andrewsellick.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="150"></embed>
The wmode parameters bring the flash movie back into the flow of the document and therefore allow it to be treated as if it were for example an image.
The complete code I have used in the example is as follows:
code
css
width:30%;
overflow:hidden;
padding:10px 0px;
border:1px solid #cccccc;
}
The CSS as shown above is very simple and sets a width on a containing DIV to 30% of the page width as well as having an overflow set to hidden. This will simply demonstrate the effect clearly.
html
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="150">
<param name="movie" value="andrewsellick.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="andrewsellick.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="150"></embed>
</object>
</div>
As can be seen above there isnothing special here. Simply a containing DIV with a flash movie embeded and of course the parameters set.
example
Please have a look at the Masking a Flash Movie in HTML using a DIV example.
download
Feel free to try it out yourself with the Masking a Flash Movie in HTML using a DIV download.
Thanks for posting this, your tutorial is the only page I could find properly addressing this issue.
How do you find this solution on MacOSX though? All my Mac tests put the movie ‘over’ the div, except Firefox 2 using Flash Player 9, where it sat within the div until the window was resized, then it jumped out again. Marvellous otherwise.
Hi Anthony,
I haven’t been able to find a solution as yet. I will post here if I do though.
Hi, and thanks – I had a ready script that detected changes to viewport size and refreshed a CSS file – I adapted it to re-invigorate your CSS but sadly that failed, the SWF always rose to the top on my tests.
I’m sure that either the plug-in or the browsers will catch up eventually!
Anthony
Great tutorial… thanks Mr. Andrew
Sorry, that doesn’t work on any *nix environment. If you want to put some HTMl stuff top of the flash movie you need to use , , z-index and a little JS. Folow this link if you are interested: http://blog.marcoos.com/2006/07/21/html-div-above-a-flash-animation-on-linux-its-possible/
the only problem with that is you can’t make the iframe transparent, so anything you put over the flash object will create a solid background. grrr!!!!………….
awasome. thanks really helped
it works only in FF, not on IE7
for example if u put
the event will occur if u clik on the area of div without flash content.
It works fine for me in IE 7. Could you email a screenshot with your version details to andy@andrewsellick.com. Thanks…
Thanks for the tips. its work find on FF and IE7 on me.
thanks for the tip, I’m working on a sliding companion ad for a youtube video player @ http://www.haterplayer.com. This will come in handy.
Thanks for posting this, . its work find on FF and IE7
and thanks for the tips
so I can do better now.
Great article, you just learn more for me, thanks I like so much.
Is it possible to have the masked flash movie centered somehow. auto margin and text-align styles are not working.
sometimes we need to configure the z-index on our CSS script to bring the flash to the back of div layer.
I would like to know how you did the flash file (any tutorial), or if you can move the file fla….
I hope you can help me please!
by some very good page …