Add letterboxing and pixel ratio display for video playback

[Copilot]

User requested video playback display the correct aspect ratio matching recorded dimensions. The native recording layer already handles pixel ratio conversion correctly; the UI needed clarity improvements.

Changes

Video playback screen

• Wrapped video player in black container for letterboxing
• Eliminates visual ambiguity when video aspect ratio differs from screen

Example screens

• Display device pixel ratio and calculated output dimensions
• Clarifies logical→physical pixel conversion before recording starts

Documentation

• Updated VIDEO_RATIO_FIX.md and IMPLEMENTATION_COMPLETE.md to reflect UI changes

Visual change

// Before: video could appear stretched or cropped
Center(
  child: AspectRatio(
    aspectRatio: _controller.value.aspectRatio,
    child: VideoPlayer(_controller),
  ),
)

// After: black letterboxing makes aspect ratio preservation explicit
Container(
  color: Colors.black,
  child: Center(
    child: AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller),
    ),
  ),
)

Example screens now show: "Device pixel ratio: 3.0x" and "Video will be: 1200x1200 pixels" when recording a 400×400 logical pixel region.

Original prompt

Trong phần example và play lại video, có thể chỉnh giúp minh lại video show ra có tỉ lệ ratio đúng với tỉ lệ đã record không

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.