The widget library for WordPress is here! Download plugin

Geometric Circle Video Hero - Podcast Style

Free

Make a bold statement with the Geometric Circle Video Hero. Inspired by modern, high-contrast branding trends (often seen in podcast and media agency designs), this widget combines vibrant geometric shapes with dynamic video content.

The centerpiece is a Circular Video Mask: a standard rectangular video is cropped into a perfect circle using CSS border-radius and overflow: hidden, creating a unique focal point that breaks the grid. To the left, semi-circular "echo" shapes create a visual rhythm or ripple effect, guiding the user's eye toward the content.

The widget is designed for high impact. The text overlays the shapes with a large, bold headline and a stylish "Contact" link featuring a custom SVG arrow. The colors are fully customizable via the editor, allowing you to match your brand's palette (e.g., changing the default neon yellow and purple to your corporate colors). It is fully responsive, creating a stacked layout on mobile while preserving the iconic geometric look.

Key Features:

  • Circular Video Masking: transforming standard video inputs into a trendy circular format without external editing.
  • Geometric "Echo" Layout: Layered semi-circles create depth and visual interest behind the main video.
  • Autoplay Video Background: Supports loop, mute, and playsinline for seamless mobile playback.
  • High-Contrast Typography: Large, editable headlines designed to pop against vibrant shape backgrounds.
  • Customizable Palette: Easily change the background and shape colors using CSS variables in the editor.
  • Responsive Design: Intelligently resizes shapes and creates a readable vertical layout on smaller screens.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.