How to make 2 videos in HTML5 overlap?

Question

I would like to make 1 HTML5 video overlap over another video? Basically I want to add a moving object (a video) over my background video. Please help me in achieving this. Thanks!

Answer 1

I have been struggling with a similar issue myself over the past couple days, and though I can't tell you exactly how to do it I can share what I have learned and hopefully get you a better starting point.
HTML5 Video and HTML5 canvas elements have some interesting interactions with each other now, in that you can take your videos and draw them onto a canvas element using the drawimage() method with the HTML5 Video element as the source.

To overlap the videos you could create a Canvas Element and using the drawimage() draw both videos onto the Canvas.

Check out this tutorial on HTML5 Video Manipulation here
Check out a demo of putting a HTML5 Video (among other things) over top another video here

Hope this Helps

Answer 2

A simple solution would be to define different z-index values in css.

HTML

<video class="video-one"> ...</video>
<video class="video-two"> ...</video>

CSS, where the second video overlaps the first one.

.video-one { z-index: 1 } /* optional */
.video-two { z-index: 2 }