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.

enter image description here

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 :

<!DOCTYPE html>
<html>
<head>
 <style>
   video{
     resize:both;
   }
 </style>
</head>
<body>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">      
</video>

</body>
</html>

this is the code that i've used from w3school. but it resizes only the controllers not the entire video. — KunalK, Mar 29 '13 at 07:19
It is quite easy if you use some lib like jQueryUI resizable. — dfsq, Mar 29 '13 at 07:23
Some pointers. Wrap your videos into resizable divs and set videos styles `{width: 100%; height: 100%}`. The trickiest part is making divs resize synchronously. — dfsq, Mar 29 '13 at 07:38

score 7 · Accepted Answer · answered Mar 29 '13 at 08:39

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/

What is this doing? All I see are three pictures, no resizing happening anywhere — john k, Feb 06 '19 at 23:37

radu florescu · Answer 2 · 2013-03-29T08:23:57.940

This is way better: http://jsfiddle.net/ScDmp/9/

<div id="myContainer">
    <video width="320" height="240" controls id="myVideo">
        <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
    </video>
    <div>
        <input type="range" min="100" max="500" step="50" id="mySlider" value="0" onchange="document.getElementById('myVideo').width = this.value;"/>

Then you may change the input slider with a timer which will check the width of the canvas every second and re size the videos accordingly.

You may try something like this with jquery ui resizable:

function ready(){
    $("#myContainer").resizable();
    var interval = setInterval(checkWidth, 1000);

    function checkWidth()
    {
         $("#myVideo").width($("#myContainer").width());
    }
    setTimeout($("#myContainer").width("100px"),1000);

    setTimeout($("#myContainer").width("200px"),5000);

    setTimeout($("#myContainer").width("300px"),10000);
}

thanks but i don't want to use any extra controls like range, i want to resize it by dragging the bottom-right corner of the video only. and i think i have got the solution for that by using __jQueryUI resizable.__ — KunalK, Mar 29 '13 at 07:52
@KunalK check my edit, I did this to show you that you may change the video width easy, will provide a more detailed example soon — radu florescu, Mar 29 '13 at 07:53

How to resize the video in HTML5 dynamically?

2 Answers2

Linked