How to Display Flash Animations Over Any Video

In this post

How to float Flash animations over video. The code in this post shows how to float any type of content over anything including Flash video.

Flash Over VideoToday I wanted to add a quick tutorial for placing Flash over video that’s content over any video. It’s fairly simple process once you get your Flash content created. Let’s get started now.

How to Create a Transparent Flash Animation

Once you have your video you’ll want to create a flash file the same size. You’ll be floating this SWF over top your video content. This can be anything you want, text, graphics, etc. The one thing you’ll need to do to create a transparent Flash movie is set your Html to be transparent. To do this go to Publish settings and click on the HTML wrapper tab. Under Window Mode select Transparent Windowless. This sets the wmode to transparent.

See Flash Animation Sample Here – Flash Over Video

Or rather see the Flash Example Here.


How to Float Content Over Anything

Once you have your pieces the code is fairly minimal and Sweet Zombie Jesus is it easy. We’ll be using the Html 5 video tag along with some Z-index code.

The CSS for Flash Over Video

The Code

Flash over video – Z-index Explained

What you’re doing with the above code is setting a Z-index or layer to the files you want to place on top of each other. Many like layers in Photoshop you’re adding layers of code and content. The higher the number the higher the file is above corresponding files. You can add as many Z-indexes over your content and layer as many movies, HTML5 or images. Be careful not to add too many. It will bog down your load times.

You’re welcome Internet 🙂



How to Display Flash Animations Over Any Video Click To Tweet