template node adding css to override value:
[{"id":"57adb1f0.9ae51","type":"ui_template","z":"26b5a4eb.db1d34","group":"5c433dd6.328804","name":"object-fit","order":2,"width":0,"height":0,"format":"<style>\n .ui-mp4frag-video {\n object-fit: contain !important;\n /*object-fit: scale-down !important;*/\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":444,"y":893,"wires":[[]]},{"id":"5c433dd6.328804","type":"ui_group","z":"","name":"Default","tab":"eeb0f4e7.54d118","order":1,"disp":true,"width":"6","collapse":false},{"id":"eeb0f4e7.54d118","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]
template type: head
css property: object-fit
css value: contain
or scale-down
both seem to keep the aspect ratio
<style>
.ui-mp4frag-video {
object-fit: contain !important;
/*object-fit: scale-down !important;*/
}
</style>