Video wall, full screen, do not preserve aspect ratio. Possible?

[thehijacker]

Hello,

I am building a video wall with multiple websockets. Not sure if issue I am trying to solve is related to jsmpeg or I just can't not figure out the html/css code.

The canvas are inside grid (4x4). Without canvas inside grid it will correctly show grid edge to edge depending on browser window size. But as soon as I add canvas inside it will strech to the width, but not limit the height. I get a slider to scroll down. What I want is that canvas would shrink proportionaly, depending on the window size without any vertical or horizontal sliders. I hope you understand me. Basically I wish to see all 16 screens in full screen page, without preserving aspect ratio. Currently it looks like that canvas is fixed to whatever is the size of the video.

Is there a CSS that I need to override or am I missing something else?

Thank you very much for the help.

[thehijacker]

Made some progress. I no longer get slider if I dinamically change width and height of canvas. But the video will not resize inside the canvas. Only canvas.

Code I used:

$(window).on('resize', function()
{
    var win = $(this);
    for (var i = 0; i < 16; i++)
    {
        var canvas = document.getElementById('player-wrp-'+(i + 1));
        canvas.height = win.height() / 4 - 10;
        canvas.width = win.width() / 4 - 10;
    }
});

Any possible way to make the video also resize?

Thank you.

[phoboslab]

The internal resolution of the canvas element (canvas.width and canvas.height) must be the same as the video resolution, otherwise the decoded video will just be drawn "outside" the element as you already figured out.

However, you can change the display size of the canvas element using the css style property. So for your example:

canvas.style.height = (win.height() / 4 - 10) + 'px';
canvas.style.width = (win.width() / 4 - 10) + 'px';

Edit: I believe you should be able to achieve the same directly in the CSS, too. Maybe using css grid or flexbox, but you're probably better of asking for a CSS solution on Stackoverflow, as this is not directly related to JSMpeg.

[thehijacker]

Hello @phoboslab.

Thank you very much. That did it.

I can resize as much as I want but it will keep it always inside the window.

Best regards!