The widget library for WordPress is here Download plugin

Ring Video Hero - Geometric Text Overlay

Free

Captivate your audience with the Ring Video Hero, a modern design component that transforms standard video content into a striking geometric centerpiece. Inspired by high-end motion graphics and editorial design, this widget features a "donut" or ring layout created by layering a smaller solid circle over a larger video circle.

The result is a sophisticated frame that draws the eye to the motion on the periphery while providing a clean, distraction-free canvas in the center for your message. The widget is fully compatible with MP4 video files, ensuring smooth, high-quality playback without the UI clutter of external players.

Typography plays a crucial role in this design. The headline features a trendy "Outlined Text" effect (using CSS -webkit-text-stroke) on specific words, adding depth and a premium feel. The layout is fully responsive, automatically adjusting the ring thickness and text size to look perfect on everything from desktops to smartphones. This widget is ideal for showcasing motion showreels, luxury products, or abstract brand imagery.

Key Features:

  • "Donut" Ring Layout: Uses Z-index layering to create a unique circular frame for video content.
  • Outlined Text Effect: CSS-powered typography styling creates a modern, high-contrast headline.
  • Seamless MP4 Playback: Optimized for direct video file uploads, ensuring fast loading and infinite looping.
  • Centered Content Area: The solid inner circle provides a perfect, readable background for headlines and calls to action.
  • Responsive Geometry: The ring and text scaling are calculated to maintain the correct proportions on mobile devices.
  • Editorial Aesthetic: A clean, minimal layout that elevates the perceived value of the content.

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.