The widget library for WordPress is here! Download plugin

Triple Circle Video Gallery - Overlapping Layout

Create a stunning visual narrative with the Triple Circle Video Gallery. Inspired by high-end fashion and lifestyle branding, this widget uses a sophisticated overlapping layout to combine three distinct visual elements: a solid accent color, a static image, and a dynamic video.

The composition relies on Z-index layering to stack three large circles horizontally. The first circle provides a bold pop of color (fully customizable). The second circle holds a high-resolution image, treated with a moody grayscale filter to create contrast. The third circle acts as the focal point, masking a video (YouTube or MP4) into a perfect circle.

Bridging these elements is a massive, editorial-style headline that floats on top of the composition. The video component includes our advanced aspect-ratio fix and zoom technique, ensuring that YouTube embeds are perfectly cropped without black bars or interface clutter. This widget is perfect for "About Us" sections, brand manifestos, or hero areas where you want to communicate depth, style, and motion simultaneously.

Key Features:

  • Triple-Layer Composition: Combines color, photography, and video in a unique overlapping arrangement.
  • Circular Video Masking: Crops rectangular videos into a perfect circle, maintaining a cohesive geometric theme.
  • Grayscale Image Filter: Automatically applies a stylish black-and-white filter to the middle image for visual balance.
  • YouTube & MP4 Support: Fully compatible with both YouTube iframes (with aspect ratio fixes) and direct video uploads.
  • Editorial Typography: Features massive, overlapping text with a custom "Registered" trademark symbol for a branded look.
  • Responsive Stacking: On mobile devices, the horizontal overlap transforms into a vertical stack, maintaining the circular aesthetic while ensuring readability.

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.