How to show 2 videos in single HTML5 Full-screen mode

Question

I have 2 video tags. How can I show a single full-screen mode containing both videos (for example, a video chat, where I want to see my own camera, and my friend's at the same time)?

Answer 1

Answer

I don't think there is a way to use the fullscreen mode like you want to do right now.

Solution

You can make an element go fullscreen such as a container that wraps the two videos. Supported in Chrome 15, Firefox 10, Safari 5.1, IE 10.

MDN reference to the fullscreen API

Other solution

You could fill the browser you your two video with something like

#video1, #video2 {
    width: 50%;
    height: 100vh;
    float:left;
}

and somewhere have a little message saying "Put your browser in fullscreen for better experience" or have a button that toggle an almost fullscreen mode like this.

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);


        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }

</script> 

Code taken from that Stack Overflow answer