Overlapping

I'm just going to say up-front that this is a world of pain that I would not recommend.

Getting pixel-perfect alignment across the wide variety of browsers, platforms, screen resolutions and devices is just a nightmarish combinatorial problem that you probably don't want to deal with.  It can probably be done, but be prepared for the pain of managing a variety of little workarounds for the edge cases, which you will probably only discover because someone complains that things have gone horribly wrong for them (your overlay is in the middle of the video, etc, etc...).

There are options for specifying the z-index of objects on a page.  Five or ten years ago, compositing was straightforward.  Now that most browsers use hardware GPUs for compositing, it's frequently up to the GPU to decide what goes on top when objects compete for layers.  This gets even trickier with plug-in content, where we might draw at a particular index when doing animation, but when the GPU (or browser) is rendering video pixels to the screen, it's probably always topmost, despite whatever you set in the CSS and JavaScript.

From a pragmatic perspective, you're probably better off finding a video control that gives you the design options you're looking for, vs. trying to hack this into submission.  There are plenty of good (commercial, reasonably priced) options in the Flash-based video player world.  I'm thinking that the HTML5 video tag also sports some options (if you're not using Flash Player for video playback), but I'm less familiar with them.