fix(iphone-15-pro): resolve iOS device video masking issue with DOM overlay (breaking change)

[Yeom-JinHo]

Description

This PR focuses on fixing iOS compatibility issues in the Iphone15Pro component.
Because mobile-first is the priority, this fix introduces a breaking change to ensure stable rendering across devices.
fixed #753

Changes

• iOS Compatibility (major fix): Replaced <foreignObject> video rendering with a DOM overlay to solve Safari/iOS masking issues.
• Sizing (breaking change): Removed width and height props. The component size is now controlled by the wrapper <div>, enforcing the aspect ratio 433/882.
• Masking: The screen area is masked only when media (src or videoSrc) is provided. Without media, only the frame is rendered.
• HTML Attributes: The component now accepts all standard HTMLDivElement props.
• Autoplay: Video uses muted and playsInline to allow autoplay on mobile. A poster can be added for better initial paint.
• Accessibility: If decorative, add aria-hidden="true" to the wrapper <div> for compliance.

Motivation

• Mobile-first: Fix critical Safari/iOS rendering issues with video masking.
• Breaking Change: The sizing API has been simplified to align with common UI library patterns, where size is handled by the wrapper.
• This ensures consistent cross-platform behavior and a more future-proof API.

Breaking Changes

• Removed width and height props from Iphone15Pro.
  → Consumers must now control size via wrapper CSS (e.g., w-[300px], max-w-full, etc.).
• Any project relying on explicit width/height props will need to migrate.

Screenshots

iphone13 mini

ASIS	TOBE

[vercel]

@Yeom-JinHo is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[Yeom-JinHo]

I’ve deployed the updated version to my live site, where you can check it:

https://v-f-labs-website-web.vercel.app/vague-frequency-labs/demo?utm_source=magic-ui-github&utm_content=iphone15-pro

[Yeom-JinHo]

I’ve been trying to find a way to fix this without introducing a breaking change and without significantly altering the structure, but I couldn’t find a better solution than this modification.

In a mobile-first world, I believe this change is both necessary and important!

[dillionverma]

thanks i like this approach, solves the issue nicely