Developers · Gutenberg
YouTube Performance Embed block for WordPress
High-performance YouTube 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 YouTube 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: “YouTube URL or Video ID” (Paste a YouTube link (watch, short, embed, youtu.be) or an 11‑char ID); “Poster source” options: YouTube (maxresdefault), YouTube (hqdefault), Custom image; “Aspect ratio” options: Auto, 16:9, 4:3, 1:1; “Play Button — Style” options: YouTube, Circle, Rounded, Square.
Where to find it
Gutenberg inserter → Developers → search “YouTube Performance Embed” (block name `blockenberg/youtube-performance` in block.json). Style it in the sidebar after insert.
How to use YouTube Performance Embed block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “YouTube Performance Embed”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Video. Set “YouTube URL or Video ID”, “Show title overlay”, “Video — Title”, “Privacy mode (youtube-nocookie.com)”.
- Check the published page. The view script reads HTML data attributes: data-controls, data-loop, data-mute, data-privacy, data-rel, data-start, data-video-id. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| YouTube URL or Video ID | Text field in the inspector. Paste a YouTube link (watch, short, embed, youtu.be) or an 11‑char ID. Saved as `videoUrl`. |
| Show title overlay | On/off toggle in the inspector. Off by default. Saved as `showTitle`. |
| Video — Title | Text field in the inspector. Saved as `title`. |
| Privacy mode (youtube-nocookie.com) | On/off toggle in the inspector. On by default. Saved as `privacyMode`. |
| Start time (seconds) | Numeric range control in the inspector. Range 0–600. block.json default: 0. Saved as `startTime`. |
| Show controls | On/off toggle in the inspector. On by default. Saved as `controls`. |
| Related videos at end | On/off toggle in the inspector. Off by default. Saved as `rel`. |
| Mute on play | On/off toggle in the inspector. Off by default. Saved as `mute`. |
| Loop | On/off toggle in the inspector. Off by default. Saved as `loop`. |
| Poster source | Select control; the chosen value is saved on the block. Options: YouTube (maxresdefault); YouTube (hqdefault); Custom image. block.json default: youtube-max. Saved as `posterSource`. |
| Aspect ratio | Select control; the chosen value is saved on the block. Options: Auto; 16:9; 4:3; 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-controls, data-loop, data-mute, data-privacy, data-rel, data-start, data-video-id.
- Keyboard handlers move focus between items.
When this is the right block
- High-performance YouTube embed with poster + lazy iframe on click — that is the job of YouTube Performance Embed, not a generic content block.
- Use it when you need the editor control labeled “YouTube URL or Video ID”, which exists on this block’s inspector.
- It matches pages about youtube, 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 YouTube Performance Embed block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “YouTube Performance Embed”. It sits under Developers. After insert, open Video and set “YouTube URL or Video ID”, “Show title overlay”, “Video — Title”, “Privacy mode (youtube-nocookie.com)”.
What makes YouTube Performance Embed different from other Blockenberg blocks?
High-performance YouTube embed with poster + lazy iframe on click. Inspector labels on this block include “YouTube URL or Video ID”, “Show title overlay”, “Video — Title”, “Privacy mode (youtube-nocookie.com)”.
Is the YouTube Performance Embed Gutenberg block free?
Yes. YouTube Performance Embed ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style YouTube 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
Vimeo Performance Embed
High-performance Vimeo 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 YouTube Performance Embed from the Gutenberg inserter.