Add an option to force media to play without a letterbox

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue: v3.0.0.

Last working release (if known): N/A

Browser and Operating System: Windows 10, Firefox 103.0b4 and Chrome 103.0.5060.66

Description of problem:

When going full screen, the camera feed is stretched to the maximum, cutting much of the feed:

I would rather expect that it fits height instead of width. Is this per design or is there some config option I need to change?

Additional information: My config:

 - type: custom:frigate-card
   cameras:
     - camera_entity: camera.main_2
     - camera_entity: camera.garage_2
     - camera_entity: camera.garden_2
   view:
     default: live
     timeout_seconds: 0
     update_cycle_camera: true
     actions:
       double_tap_action:
         action: custom:frigate-card-action
         frigate_card_action: fullscreen
   dimensions:
     aspect_ratio_mode: dynamic
     #aspect_ratio: '1/1'
   card_mod:
     style:
       .: |
         ha-card {
           border-radius: 4.75% !important;
         }
         .container {
           border-radius: 4.75% !important;
         }

The stream is 2560x1920, screenshot from ultrawide monitor.

[dermotduffy]

Still planning to experiment with this!

I think we can do some of this by allowing the user to control the object-fit and object-position of the various forms of media the card supports. Notably absent is “zoom” / scale, I can’t find a clever way to do that that doesn’t result in the whole video component being scaled (i.e. including the video controls, possibly cutting them off, etc).

In short: I think this would cover @anarion80’s usecase, and at least some of @conorlap’s …

[anarion80]

And it does work indeed! Thank you very much!