Media · Gutenberg
Video Section block for WordPress
Featured video section with headline, description, play button and optional stat strip below.
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
Featured video section with headline, description, play button and optional stat strip below.
Inspector panels on this block: Video Source, Layout & Display, Content, Stats, Stat. Those titles come from index.js, not from a shared template.
Behavior controls: “Video type” options: Self-hosted, YouTube, Vimeo; “YouTube Video ID” (e.g. dQw4w9WgXcQ from the URL); “Vimeo Video ID” (e.g. 148751763 from the URL); “Aspect ratio” options: 16 / 9, 4 / 3, 21 / 9, 1 / 1.
Where to find it
Gutenberg inserter → Media → search “Video Section” (block name `blockenberg/video-section` in block.json). Style it in the sidebar after insert.
How to use Video Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Video Section”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Video Source. Set “Video type”, “YouTube Video ID”, “Vimeo Video ID”, “Video URL (.mp4)”.
- Check the published page. The view script reads HTML data attributes: data-video-type, data-video-url, data-vimeo-id, data-youtube-id. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Video type | Select control; the chosen value is saved on the block. Options: Self-hosted; YouTube; Vimeo. block.json default: youtube. Saved as `videoType`. |
| YouTube Video ID | Text field in the inspector. e.g. dQw4w9WgXcQ from the URL. Saved as `youtubeId`. |
| Vimeo Video ID | Text field in the inspector. e.g. 148751763 from the URL. Saved as `vimeoId`. |
| Video URL (.mp4) | Text field in the inspector. Saved as `videoUrl`. |
| Aspect ratio | Select control; the chosen value is saved on the block. Options: 16 / 9; 4 / 3; 21 / 9; 1 / 1. block.json default: 16/9. Saved as `aspectRatio`. |
| Play button style | Select control; the chosen value is saved on the block. Options: Circle; Square; Pill. block.json default: circle. Saved as `playButtonStyle`. |
| Play button size (px) | Numeric range control in the inspector. Range 48–120. block.json default: 72. Saved as `playButtonSize`. |
| Video max width (px) | Numeric range control in the inspector. Range 400–1400. block.json default: 900. Saved as `maxWidth`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `borderRadius`. |
| Video shadow | On/off toggle in the inspector. On by default. Saved as `showShadow`. |
| Text alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Show content block | On/off toggle in the inspector. On by default. Saved as `showContent`. |
| Show badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge text | Text field in the inspector. block.json default: Watch Now. Saved as `badge`. |
| Headline tag | Select control; the chosen value is saved on the block. block.json default: h2. Saved as `headlineTag`. |
| Show stats strip | On/off toggle in the inspector. On by default. Saved as `showStats`. |
| Value | Text field in the inspector. |
| Label | Text field in the inspector. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-video-type, data-video-url, data-vimeo-id, data-youtube-id.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Featured video section with headline, description, play button and optional stat strip below — that is the job of Video Section, not a generic content block.
- Use it when you need the editor control labeled “Video type”, which exists on this block’s inspector.
- Inserter grouping: video, animation, and rich media sections.
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 Video Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Video Section”. It sits under Media. After insert, open Video Source and set “Video type”, “YouTube Video ID”, “Vimeo Video ID”, “Video URL (.mp4)”.
What makes Video Section different from other Blockenberg blocks?
Featured video section with headline, description, play button and optional stat strip below. Inspector labels on this block include “Video type”, “YouTube Video ID”, “Vimeo Video ID”, “Video URL (.mp4)”.
Is the Video Section Gutenberg block free?
Yes. Video Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Video Section 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: Video Source, Layout & Display, Content, Stats).
Related media blocks
Audio Player
Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips.
Background Video
A looping autoplay background video section with overlay and InnerBlocks content — distinct from video players or popups.
Before / After Grid
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Before/After Slider
Compare two images with a draggable slider handle.
Device Mockup
Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window.
Embed / iFrame
Responsive iframe embed for Calendly, Typeform, Google Forms, Airtable, YouTube, Vimeo, or any URL. Full aspect-ratio control and loading options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Video Section from the Gutenberg inserter.