How to resize the video in HTML5 dynamically?

Question

we have the requirement in the project that having 3 videos in an html page like shown in the following image. Now by clicking at the bottom-right corner on each of this video user can resize the video and accordingly the size of other videos will change. The problem i am facing here is how to resize the video by just pressing and dragging the mouse click on the bottom-right corner of each video, i've tried using `resize` property of `video` tag but it resizes the width and height of the controllers of the video. Do i have to use any third party API or JavaScript or am i doing any silly mistake? by doing some RND on this i came to know about `canvas`. but doesn't get any idea how to use it with video together. can anyone please guide me here? Any kind of help would be greatly appreciated. CODE : ```

Accepted Answer

To be honest it's a little bit confusing that you have so many resize handles. It also makes things pretty complicated.

This is what I came up so far, this should give you a good sense of the complete implementation:

```
var $cont = $('#container'),
    contWidth = $cont.width(),
    contHeight = $cont.height(),
    $one = $('#one'),
    $two = $('#two'),
    $ltop = $one.find('.ltop'),
    $lbot = $one.find('.lbot');

$ltop.resizable({
    handles: 'se',
    minWidth: '100',
    maxWidth: '400',
    resize: function() {
        var width = $(this).width(),
            height = $(this).height(),
            remSpaceH = contWidth - width,
            remSpaceV = contHeight - height;

$one.width(width);
        $two.width(remSpaceH - ($two.outerWidth() - $two.width()));

$lbot.height(remSpaceV - ($lbot.outerHeight() - $lbot.height()));
    }
});
```

Demo: http://jsfiddle.net/dfsq/KuAsz/

How to resize the video in HTML5 dynamically?

Solution

Problem