Marketing · Gutenberg
Feature Video Tabs block for WordPress
A feature showcase section with tab navigation and an auto-playing video per tab. Each tab shows a headline, description, bullet points, and an optional CTA button alongside its video.
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
A feature showcase section with tab navigation and an auto-playing video per tab. Each tab shows a headline, description, bullet points, and an optional CTA button alongside its video.
Inspector panels on this block: Feature Tabs, Layout & Video, Display. Those titles come from index.js, not from a shared template.
Behavior controls: “Video Position” options: Video on Right, Video on Left; “Tab Style” options: Pills, Left Border Lines, Cards; “Video Aspect Ratio” options: 16:9 (Widescreen), 4:3, 3:2, 1:1 (Square).
Where to find it
Gutenberg inserter → Marketing → search “Feature Video Tabs” (block name `blockenberg/feature-video-tabs` in block.json). Style it in the sidebar after insert.
How to use Feature Video Tabs block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Feature Video Tabs”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Feature Tabs. Set “Tab Label”, “Icon Emoji”, “Headline”, “CTA Button Label”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Tab Label | Text field in the inspector. |
| Icon Emoji | Text field in the inspector. |
| Headline | Text field in the inspector. |
| CTA Button Label | Text field in the inspector. |
| CTA URL | Text field in the inspector. |
| Video URL (mp4, webm) | Text field in the inspector. |
| Video Poster Image URL | Text field in the inspector. |
| Video Position | Select control; the chosen value is saved on the block. Options: Video on Right; Video on Left. block.json default: right-video. Saved as `layout`. |
| Tab Style | Select control; the chosen value is saved on the block. Options: Pills; Left Border Lines; Cards. block.json default: pills. Saved as `tabStyle`. |
| Tab Area Width % | Numeric range control in the inspector. Range 25–65. block.json default: 40. Saved as `tabAreaWidth`. |
| Column Gap (px) | Numeric range control in the inspector. Range 16–120. block.json default: 48. Saved as `gap`. |
| Video Aspect Ratio | Select control; the chosen value is saved on the block. Options: 16:9 (Widescreen); 4:3; 3:2; 1:1 (Square). block.json default: 16/9. Saved as `aspect`. |
| Video Autoplay (muted) | On/off toggle in the inspector. On by default. Saved as `videoAutoPlay`. |
| Loop Video | On/off toggle in the inspector. On by default. Saved as `videoLoop`. |
| Video Corner Radius | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `videoRadius`. |
| Video Shadow | On/off toggle in the inspector. On by default. Saved as `videoShadow`. |
| Show Icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show Bullet Points | On/off toggle in the inspector. On by default. Saved as `showBullets`. |
| Show CTA Button | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| Auto-Advance Tabs | On/off toggle in the inspector. Off by default. Saved as `autoAdvance`. |
| Auto-Advance Delay (ms) | Numeric range control in the inspector. Range 1000–15000. block.json default: 5000. Saved as `autoAdvanceDelay`. |
| Headline (Typo Headline) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeadline`. |
| Description | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDesc`. |
| Bullet Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBullet`. |
| Tab Label (Typo Tab Label) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTabLabel`. |
| Icon Size (px) | Numeric range control in the inspector. Range 14–48. block.json default: 24. Saved as `iconSize`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Active Tab Background | Color control in the inspector. block.json default: #6366f1. Saved as `activeTabBg`. |
| Active Tab Text | Color control in the inspector. block.json default: #ffffff. Saved as `activeTabColor`. |
| Idle Tab Background | Color control in the inspector. Saved as `idleTabBg`. |
| Idle Tab Text | Color control in the inspector. block.json default: #374151. Saved as `idleTabColor`. |
| Headline Color | Color control in the inspector. block.json default: #111827. Saved as `headlineColor`. |
| Description Color | Color control in the inspector. block.json default: #4b5563. Saved as `descColor`. |
| Bullet Text Color | Color control in the inspector. block.json default: #374151. Saved as `bulletColor`. |
| Bullet Check Color | Color control in the inspector. block.json default: #6366f1. Saved as `bulletDot`. |
| CTA Button Background | Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`. |
| CTA Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Video Background | Color control in the inspector. block.json default: #000000. Saved as `videoBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- Keyboard handlers move focus between items.
When this is the right block
- A feature showcase section with tab navigation and an auto-playing video per tab. Each tab shows a headline, description, bullet points, and an optional CTA button alongside its video — that is the job of Feature Video Tabs, not a generic content block.
- Use it when you need the editor control labeled “Tab Label”, which exists on this block’s inspector.
- It matches pages about feature, tabs, video.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Feature Video Tabs block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Feature Video Tabs”. It sits under Marketing. After insert, open Feature Tabs and set “Tab Label”, “Icon Emoji”, “Headline”, “CTA Button Label”.
What makes Feature Video Tabs different from other Blockenberg blocks?
A feature showcase section with tab navigation and an auto-playing video per tab. Each tab shows a headline, description, bullet points, and an optional CTA button alongside its video. Inspector labels on this block include “Tab Label”, “Icon Emoji”, “Headline”, “CTA Button Label”.
Is the Feature Video Tabs Gutenberg block free?
Yes. Feature Video Tabs ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Feature Video Tabs 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: Feature Tabs, Layout & Video, Display).
Related marketing blocks
Product Tour
An interactive product walkthrough with numbered steps, descriptions and screenshots. Tabs-style navigation — perfect for onboarding flows and feature showcases.
Feature Showcase
Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Comparison Section
Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls.
Comparison Wall
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Feature Video Tabs from the Gutenberg inserter.