Issue

When using the Twilio Video JavaScript SDK, remote video sent from iOS Safari (Portrait) may appear heavily cropped or "zoomed-in" when viewed on Desktop Chrome. While the sender's local preview looks correct, the recipient only sees a partial view of the stream.

Product

Programmable Video 

Cause

This behavior occurs when desktop browsers attempt to "fill" a landscape video container with a portrait stream. Additionally, iOS Safari sometimes reports video dimensions that lead to aspect ratio mismatches if explicit constraints aren't defined.

Resolution

1. Adjust CSS on the Desktop (Receiver)

The "heavy cropping" is typically caused by the browser trying to fill a landscape container with a portrait stream. Force the video to stay within its natural boundaries:

video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Ensures the full portrait frame is visible */
  background-color: #000;         /* Optional: standardizes the 'bars' look */
}

2. Set Explicit Constraints (iOS Sender)

Ensure the iOS Safari client explicitly requests a portrait aspect ratio to help the browser negotiate the correct stream intent:

const localVideoTrack = await Video.createLocalVideoTrack({
  width: { ideal: 720 },
  height: { ideal: 1280 },
  aspectRatio: 9/16 // Explicitly signals portrait mode
});

3. Reactive Layout Handling

remoteTrack.on('dimensionsChanged', track => {
  console.log(`Updated resolution: ${track.dimensions.width}x${track.dimensions.height}`);
  // Trigger any custom layout logic here if necessary
});

Additional Information

Using object-fit: contain is the most reliable way to handle mixed aspect ratios (Portrait vs. Landscape) in telemedicine and 1:1 video consultations. If the issue persists, verify that no parent <div> containers have overflow: hidden or fixed aspect ratios that might override the video element's styling.