Dada una etapa de etapaW por etapaH y N cantidad de videos con tamaños (arbitrarios) srcVideoW por srcVideoH, ¿cómo diseñar mejor los videos para cubrir la máxima cobertura? Los videos pueden escalarse hacia arriba o hacia abajo, pero deben escalarse proporcionalmente (ya sea vertical u horizontal) con alturas coincidentes.
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"); }El diseño más probable sería: si solo hay 1 video, probablemente ocuparía el ancho y la altura del escenario, si 2 están uno al lado del otro, 3 también en una fila, de aproximadamente 4, probablemente sería mejor dos en la primera fila, dos en la segunda... etc etc
Esto es lo que buscas: https://alicunde.github.io/Videoconference-Dish-CSS-JS/