I’d like to put a screen recording of my iPhone within an iPhone frame on my landing page. How can I do this?
I’ve done something similar. https://overlap-with-video.webflow.io/
Posted read-only link below.
Mine is a laptop but same concept. You’ll need an image of an iphone with the screen area knocked out so that it’s transparent (png). This image will be set to absolute positioning and a higher z-index. You will then have your screen recording inserted as a background video with absolute positioning and a lower z-index. The two elements will overlap. There’s some tweaking of the position to get them lined up correctly.
I sized, cropped, changed speed of my screen recording using: Online Video Resizer
This example does not scale based on a width percentage. I use fixed pixel sizes on these elements to maintain control at the various breakpoints. You can see the effect if you resize your browser while viewing my sample page.
Thanks @Port_of_Folio ! The problem I’m having is I have an iPhone frame, but the corners aren’t square like a Macbook so it doesn’t fit in correctly
It will take some custom tweaking. The phone image may need to be slightly adjusted so that it frames your video with the rounded corners. You can tighten up the inner “frame” of iphone a few pixels. This way the frame is masking the video slightly with the overlap.
In my sample, I’ve done this where the edges of my video are slightly covered up so that there’s no gap.
Got it working thanks! My screen recording is slightly pixelated though.
How did you record such a clear screen recording?
Hope you figured it out. I’m on a Mac and use QuickTime screen recording and export at 1080