Phone Mockup Video Frame

Code Toolkit
Written By Squarestylist Support

What You'll Create

Videos displayed inside a realistic phone frame in Squarespace, with rounded 30px corners matching the device shape and the frame overlay positioned precisely around the video content.

The Problem It Solves

Showing app demos or mobile content in context typically requires pre-compositing videos with device frames in video editing software. This CSS technique applies the frame dynamically to any video.

Perfect For

App demonstrations, social media video previews, mobile website showcases, UX case studies, product tutorials

What Makes This Different

Uses the phone frame image as an overlay, positioned to extend 20% beyond the video edges. The video gets 30px rounded corners and 207% padding for the phone aspect ratio. Video content scales properly to fill the frame.

Details

  • Section Type: Fluid Engine

  • Code Type: CSS

  • Prerequisites: Video Block with native player, Phone frame image uploaded

  • Toolkit Title: Video Mockups (Fluid)

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Video Block Aspect Ratio Fix
Next

Stacked List Cards with Scroll Offsets