Given a stage of stageW by stageH, and N number of videos with (arbitrary) sizes srcVideoW by srcVideoH, how to best layout the videos to cover the maximum coverage? Videos can scale up or down but should be scaled proportionately (either portrait or landscape) with matching heights.

let VideoCount = $("#Stage").find('video').length;
let stageW = $("#Stage").outerWidth();
let stageH = $("#Stage").outerHeight();
$("#Stage").find('video').each(function() {
    var srcVideoW = this.videoWidth;
    var srcVideoH = this.videoHeight;

    var BestWidth = 0;
    var BestHeight = 0;

    // Magical Javascript goes here

    $(this).css("float", "left");
    $(this).css("display", "inline-block");
    $(this).css("width", BestWidth+"px");
    $(this).css("height", BestHeight+"px");
}

Most likely layout would be: if there is only 1 video, it would probably take up the stage width and height, if 2 then be side-by-side, 3 also in a row, from about 4, it would probably be best two on the first row, two on the second.... etc etc