How to play mp4 inside an iPhone mockup in Webflow?

Apple use some cool stuff to show how apps work,
It’s an iPhone mockup and a mp4 that placed inside it so I want to make something similar.
here you can check:

how can I make it in Webflow.

Aren’t those Apple pages nice?

You can use a Background video element, and place a transparent element on top of it for the frame of the iphone.

I inspected the website and stole the iphone frame image and the mp4.
Iphone: https://www.apple.com/v/ios/ios-16-preview/a/images/overview/shared/iphone_hardware__fv5le7j50lm6_large.png
MP4: https://www.apple.com/105/media/us/ios/ios-16-preview/2022/a230c0b2-4542-47c3-b7d9-8efe0510bbcb/anim/notifications/large.mp4

Let’s redo it in Webflow.

Here you go https://preview.webflow.com/preview/2022-vincent-bidaux-sandbox?utm_medium=preview_link&utm_source=designer&utm_content=2022-vincent-bidaux-sandbox&preview=e5c77dcfcb658a669fea331c64564bc4&pageId=629faf07f2933bd4a7e2c635&workflow=preview

@vincent Thanks for your help,
It’s a nice solution but there is a problem, the quality of video is awful and pixelated

It’s not something we see in apple page, the video is mp4 and has a good quality,

I found this in Webflow forum but unfortunately I don’t know how to use it( I use free subscription )

Do you think this is something Im looking for?

Hey Vincent,

This is brilliant! I tried to copy this for a project of mine, but was unable to. I was wondering how you get the play and pause button to work if they are behind the iphone frame image.

1 Like

@Lukas_Stewart You can exclude any element from catching clicks with CSS.

.class {pointer-events:none}