Today 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
position: relative;z-index: 1;
<video id="video" loop autoplay preload="auto"> <source src="YOUR VIDEO HERE.mp4" type="video/webm" /> <div id="over_video">YOUR FLASH CODE HERE</div>
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 🙂
[bctt tweet="How to Display Flash Animations Over Any Video"]