Developers · Gutenberg
Vimeo Performance Embed block for WordPress
High-performance Vimeo embed with poster + lazy iframe on click.
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
High-performance Vimeo embed with poster + lazy iframe on click.
Inspector panels on this block: Video, Poster, Design, Play Button. Those titles come from index.js, not from a shared template.
Behavior controls: “Vimeo URL or Video ID” (Paste a Vimeo link or a numeric ID); “Poster source” options: Vimeo (oEmbed), Custom image; “Aspect ratio” options: Auto, 4:3, 16:9, 1:1; “Play Button — Style” options: YouTube, Circle, Rounded, Square.
Where to find it
Gutenberg inserter → Developers → search “Vimeo Performance Embed” (block name `blockenberg/vimeo-performance` in block.json). Style it in the sidebar after insert.
How to use Vimeo Performance Embed block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Vimeo Performance Embed”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Video. Set “Vimeo URL or Video ID”, “Do Not Track (dnt=1)”, “Autoplay on click”, “Muted”.
- Check the published page. The view script reads HTML data attributes: data-autoplay, data-chrome, data-dnt, data-embed-src, data-loop, data-muted, data-video-id, data-video-url. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Vimeo URL or Video ID | Text field in the inspector. Paste a Vimeo link or a numeric ID. Saved as `videoUrl`. |
| Do Not Track (dnt=1) | On/off toggle in the inspector. On by default. Saved as `dnt`. |
| Autoplay on click | On/off toggle in the inspector. On by default. Saved as `autoplay`. |
| Muted | On/off toggle in the inspector. Off by default. Saved as `muted`. |
| Loop | On/off toggle in the inspector. Off by default. Saved as `loop`. |
| Show title/byline/portrait | On/off toggle in the inspector. Off by default. Saved as `showTitleBylinePortrait`. |
| Poster source | Select control; the chosen value is saved on the block. Options: Vimeo (oEmbed); Custom image. block.json default: vimeo. Saved as `posterSource`. |
| Aspect ratio | Select control; the chosen value is saved on the block. Options: Auto; 4:3; 16:9; 1:1. block.json default: 4/3. Saved as `aspect`. |
| Minimum height (px) | Numeric range control in the inspector. Range 120–900. block.json default: 350. Saved as `minHeight`. |
| Border radius | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`. |
| Design — Shadow | On/off toggle in the inspector. Off by default. Saved as `shadow`. |
| Play Button — Style | Select control; the chosen value is saved on the block. Options: YouTube; Circle; Rounded; Square. block.json default: youtube. Saved as `playStyle`. |
| Play Button — Size | Numeric range control in the inspector. Range 36–120. block.json default: 50. Saved as `playSize`. |
| Hover scale | Numeric range control in the inspector. Range 1–1.2. block.json default: 1.05. Saved as `playHoverScale`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-autoplay, data-chrome, data-dnt, data-embed-src, data-loop, data-muted, data-video-id, data-video-url.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
- Keyboard handlers move focus between items.
When this is the right block
- High-performance Vimeo embed with poster + lazy iframe on click — that is the job of Vimeo Performance Embed, not a generic content block.
- Use it when you need the editor control labeled “Vimeo URL or Video ID”, which exists on this block’s inspector.
- It matches pages about vimeo, video, embed.
- Inserter grouping: docs sites, utilities, and developer landing pages.
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 Vimeo Performance Embed block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Vimeo Performance Embed”. It sits under Developers. After insert, open Video and set “Vimeo URL or Video ID”, “Do Not Track (dnt=1)”, “Autoplay on click”, “Muted”.
What makes Vimeo Performance Embed different from other Blockenberg blocks?
High-performance Vimeo embed with poster + lazy iframe on click. Inspector labels on this block include “Vimeo URL or Video ID”, “Do Not Track (dnt=1)”, “Autoplay on click”, “Muted”.
Is the Vimeo Performance Embed Gutenberg block free?
Yes. Vimeo Performance Embed ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Vimeo Performance Embed 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, Poster, Design, Play Button).
Related developers blocks
YouTube Performance Embed
High-performance YouTube embed with poster + lazy iframe on click.
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Barcode Generator
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Vimeo Performance Embed from the Gutenberg inserter.