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.

Let’s redo it in Webflow.

Here you go

@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}