fix: support iOS inline hero video playback

[mira-weaverse]

Summary

• Add native autoPlay and playsInline attributes to the Hero Video ReactPlayer instance.
• Ensure the rendered HTML video element has muted, defaultMuted, playsinline, webkit-playsinline, autoplay, and loop attributes when applicable.
• Keeps mobile Safari and Chrome on iOS from opening or blocking background Hero Video playback because of missing inline autoplay attributes.

Test Plan

• npm run typecheck
• npx biome check app/sections/hero-video/index.tsx
• npm run build

Note: npm run biome still fails on existing unrelated issues in app/components/root/consent-banner.tsx, app/components/cart/cart-summary.tsx, app/sections/blog-post.tsx, and app/utils/checkout-attribution.ts; the changed Hero Video file passes targeted Biome check.

[Copilot]

Pull request overview

Updates the Hero Video section to better support iOS inline playback by ensuring the underlying <video> element is configured with the attributes required for muted inline autoplay on Mobile Safari/Chrome.

Changes:

• Mutates the rendered <video> element to enforce muted/defaultMuted, playsinline/webkit-playsinline, and conditionally autoplay/loop.
• Passes autoPlay and playsInline props to the ReactPlayer instance alongside existing playing/muted/loop behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.