Video Overlay Popup

About

This component was designed for an easy way to create interactive corner video players for promotions, tutorials, and user engagement on your site. We have designed this plugin carefully to ensure it is fully customisable using Framer's layout tools. Use our template as a base and tweak for your branding and promotional needs.

Setup instructions

Step 1. Copy the corner video component from the remix link

Step 2. Publish and ensure the corner video is displaying. If not, feel free to reach out to support!

Step 3. Modify and tailor to your needs!

Property controls

Video

The video file to display. Supports MP4, MOV, WebM, and MKV formats.

Height

The height of the video in pixels. Default: 600px.

Width

The width of the video in pixels. Default: 250px.

Position

The corner position where the video will be displayed. Options: Top Left, Top Right, Bottom Left, Bottom Right. Default: Top Left.

Show Notch When Hidden

When enabled, shows a small "notch" button when the video is hidden, allowing users to re-open it.

Notch Text

The text displayed on the notch button. Default: "Learn more".

Notch Background Color

The background color of the notch button. Default: White.

Notch Text Color

The text color of the notch button. Default: Black.

Notch Font

Custom font styling for the notch text, including font family and weight.

Show Content Popup

When enabled, allows the video to open a content popup overlay when clicked.

Is Mobile

Boolean flag to determine if the current device is mobile. Used to show appropriate content and behavior.

Desktop Popup Content

The content to display in the popup overlay on desktop devices. This should be a component instance.

Mobile Popup Content

The content to display in the popup overlay on mobile devices. This should be a component instance.

Hide in Editor

When enabled, the corner video will be hidden in the Framer editor but visible on the published site.

Hide Z-Index Message

When enabled, the z-index warning message will be hidden. Useful for production sites.

Important notes

Layer names

BnnrFlexContent_fullspread is a keyword used by the plugin. To ensure fullscreen display, you must ensure the layer is named like this. (Often important on mobile popups)

Support 

Please feel free to contact Ben at ben@blueboxdigital.co.uk for help setting up the component.