Circular Video Hero Block

Break away from the standard rectangular grid with the Circular Video Hero Block. Inspired by bold, editorial design trends, this widget acts as a striking focal point for your landing page. It features a perfectly round viewport that masks a background video, creating a "portal" effect that draws the user's attention immediately.

The widget is engineered to solve a common web design challenge: making YouTube iframes fill a specific shape without black bars. It uses a custom CSS aspect-ratio lock (forcing a 16:9 ratio within the 1:1 container) to ensure both YouTube embeds and standard uploaded videos cover the entire circle edge-to-edge.

Centered over the video is a bold, editable text area, sitting on top of a subtle dark overlay to ensure readability regardless of the video's brightness. This is an ideal component for "Mood" sections, mission statements, or artistic intros where you want to transmit a feeling rather than just display information.

Key Features:

• Circular Video Masking: Uses CSS border-radius and overflow: hidden to crop rectangular videos into a perfect circle.
• Universal Video Support: Engineered to work seamlessly with both YouTube Iframes and HTML5 Video (MP4) uploads.
• Auto-Aspect Ratio Fix: Includes specific CSS logic to force YouTube players to "cover" the container, eliminating letterboxing (black bars).
• Text-Over-Media: Features a centered, editable headline area layered securely above the video content.
• Readability Overlay: Built-in dark tint ensures white text remains legible against dynamic video backgrounds.
• Responsive Scaling: The circular container scales fluidly with the screen width, adjusting text size for mobile devices.