H5P Resizer JS

Deze tool analyseert een doelcontainer en levert dimensieregels voor H5P-inhoudsblokken zodat de inhoud past zonder overflow en tegelijkertijd de interactiviteit behoudt. Gericht op ontwikkelaars, instructional designers en cursusmakers die H5P-activiteiten in responsive LMS-pagina's embedden. Wanneer een pagina-indeling consistentie vereist over breakpoints of wanneer inhoud te groot is voor een container of te veel lege ruimte achterlaat, biedt de tool integratieklare metingen en codefragmenten die H5P-assets niet wijzigen.
De kernactie gebruikt een fit-to-container-benadering: gegeven container_width en container_height en optioneel aspect_ratio, berekent het een enkele schaalfactor en past deze toe op de basisafmetingen van het H5P-blok. Als aspect_ratio is opgegeven, dwingt het tool eindafmetingen af om die verhouding te halen, en berekent vervolgens de schaal opnieuw om vervorming te minimaliseren. Optionele beperkingen (min_width, max_width, min_height, max_height) beperken het resultaat. De tool kan een CSS-snippet exporteren en optioneel een lichtgewicht JavaScript-hook dat sizing bij resizing opnieuw toepast. Het behoudt het interactieve oppervlak terwijl rendering voorspelbaar blijft. Typische use-cases zijn uniforme kaarten in cursusoverzichten, dashboards met meerdere activiteiten en modules ingebed in andere inhoudsblokken. De toegevoegde waarde is het automatisch genereren van embed-klaar regels die practitioners zonder handmatige berekeningen kunnen plakken. Toekomstige uitbreidingen omvatten hoogte-autosizing, DPI-gevoelig schalen of per-activiteit presets, met een smalle scope gericht op container-fit en aspectbehoud.