Layout · Gutenberg
Video Hero block for WordPress
Hero section with video preview or background video, headline, CTA buttons and optional social proof.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Hero section with video preview or background video, headline, CTA buttons and optional social proof.
Inspector panels on this block: Content, Video, Style & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Video URL / Embed URL” (YouTube, Vimeo, or direct embed URL); “Video Layout” options: Video below content, Video beside content; “Aspect Ratio” options: 16:9 (Widescreen), 4:3, 21:9 (Cinematic); “Section Style” options: Dark, Light, Gradient.
Video Hero has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Layout → search “Video Hero” (block name `blockenberg/video-hero` in block.json). Style it in the sidebar after insert.
How to use Video Hero block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Video Hero”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Content. Set “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Show Primary CTA”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Eyebrow | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Eyebrow Text | Text field in the inspector. block.json default: See it in action. Saved as `eyebrow`. |
| Show Subheading | On/off toggle in the inspector. On by default. Saved as `showSubheading`. |
| Show Primary CTA | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| CTA Text | Text field in the inspector. block.json default: Start free trial. Saved as `ctaText`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Show Secondary CTA | On/off toggle in the inspector. On by default. Saved as `showSecondaryCta`. |
| Secondary Text | Text field in the inspector. block.json default: Learn more. Saved as `ctaSecondaryText`. |
| Secondary URL | Text field in the inspector. block.json default: #. Saved as `ctaSecondaryUrl`. |
| Video URL / Embed URL | Text field in the inspector. YouTube, Vimeo, or direct embed URL. block.json default: https://www.youtube.com/embed/dQw4w9WgXcQ. Saved as `videoUrl`. |
| Video Layout | Select control; the chosen value is saved on the block. Options: Video below content; Video beside content. block.json default: below. Saved as `videoLayout`. |
| Aspect Ratio | Select control; the chosen value is saved on the block. Options: 16:9 (Widescreen); 4:3; 21:9 (Cinematic). block.json default: 16-9. Saved as `aspectRatio`. |
| Show Play Button Overlay | On/off toggle in the inspector. On by default. Saved as `showPlayButton`. |
| Video Shadow | On/off toggle in the inspector. On by default. Saved as `videoShadow`. |
| Video Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `videoRadius`. |
| Section Style | Select control; the chosen value is saved on the block. Options: Dark; Light; Gradient. block.json default: dark. Saved as `style`. |
| Content Alignment | Select control; the chosen value is saved on the block. Options: Center; Left. block.json default: center. Saved as `contentAlign`. |
| Max Content Width (px) | Numeric range control in the inspector. Range 480–1200. block.json default: 820. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #0f172a. Saved as `bgColor`. |
| Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Heading | Color control in the inspector. block.json default: #ffffff. Saved as `headingColor`. |
| Subheading | Color control in the inspector. block.json default: rgba(255,255,255,0.65). Saved as `subColor`. |
| Eyebrow | Color control in the inspector. block.json default: #a78bfa. Saved as `eyebrowColor`. |
| Primary Button | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Primary Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnText`. |
| Secondary Button Text | Color control in the inspector. block.json default: rgba(255,255,255,0.85). Saved as `btn2Text`. |
| Video Border | Color control in the inspector. block.json default: rgba(255,255,255,0.1). Saved as `videoBorder`. |
When this is the right block
- Hero section with video preview or background video, headline, CTA buttons and optional social proof — that is the job of Video Hero, not a generic content block.
- Use it when you need the editor control labeled “Show Eyebrow”, which exists on this block’s inspector.
- It matches pages about hero, video, demo.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Video Hero block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Video Hero”. It sits under Layout. After insert, open Content and set “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Show Primary CTA”.
What makes Video Hero different from other Blockenberg blocks?
Hero section with video preview or background video, headline, CTA buttons and optional social proof. Inspector labels on this block include “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Show Primary CTA”.
Is the Video Hero Gutenberg block free?
Yes. Video Hero ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Video Hero to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Content, Video, Style & Layout).
Related layout blocks
Gradient Hero
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row.
Split Hero
Two-column hero section with headline, badge, body text, dual CTA buttons and social proof on one side — image or video on the other. Built for landing pages.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Dark Hero
Dark glassmorphism hero for AI, SaaS and tech sites. Features glow effects, gradient text, optional floating stat badges, badge pill, and rich button controls.
Gradient Section
A full-width section with an animated CSS gradient background, headline, subtext, and dual call-to-action buttons.
Mega Menu
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Video Hero from the Gutenberg inserter.