# iPhone 17 Pro Max (w/ video)

> Example iPhone 17 Pro Max mockup with a bundled screen video; shows the children slot and /videos/blocks/... swap pattern.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/iphone-17-pro-max-with-video).

- Page, with a live preview: https://shadcn.exchange/r/uiception/iphone-17-pro-max-with-video
- Screenshot: https://shadcn.exchange/shot/uiception/iphone-17-pro-max-with-video/light.png
- Registry item: https://uiception.com/r/iphone-17-pro-max-with-video.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/iphone-17-pro-max-with-video.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://uiception.com/r/block-media.json`, `https://uiception.com/r/iphone-17-pro-max.json`

## Files

### `registry/new-york/blocks/iphone-17-pro-max-with-video/page.tsx`

```tsx
import Iphone17ProMaxWithVideo from "./components/iphone-17-pro-max-with-video"

export default function Page() {
  return (
    <div className="px-4 py-4 md:px-6 md:py-6">
      <Iphone17ProMaxWithVideo />
    </div>
  )
}
```

### `registry/new-york/blocks/iphone-17-pro-max-with-video/components/iphone-17-pro-max-with-video.tsx`

```tsx
import { createBlockVideo } from "@/lib/block-media"

import Iphone17ProMax from "../../iphone-17-pro-max/components/iphone-17-pro-max"

const blockVideo = createBlockVideo("iphone-17-pro-max-with-video")
const SCREEN_VIDEO = blockVideo("video.mp4")

export default function Iphone17ProMaxWithVideo() {
  return (
    <Iphone17ProMax statusBar={{ tint: "light" }}>
      <div className="relative size-full overflow-hidden">
        <video
          className="absolute inset-0 size-full max-w-none border-none object-cover object-center"
          src={SCREEN_VIDEO}
          muted
          loop
          playsInline
          autoPlay
          aria-label="Screen content video demo"
        />
      </div>
    </Iphone17ProMax>
  )
}
```

### `public/videos/blocks/iphone-17-pro-max-with-video/video.mp4.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: mp4, webm, mov, or m4v. Remove the .gitkeep extension from the filename.
```