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 Webflow - ✓ 2022 Vincent Bidaux Sandbox
@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}