Content module

Video block

YouTube, Vimeo or self-hosted video. External players load only when clicked, keeping pages fast and privacy-friendly.

Overview

The Video block plays a YouTube or Vimeo video, or a video file from your Media Library. By default it shows a poster image with a play button and loads the YouTube or Vimeo player only when the visitor presses play (“click to load”). This keeps pages fast and avoids sending visitor data to YouTube or Vimeo until they choose to watch. YouTube videos use the privacy-enhanced youtube-nocookie.com domain, and Vimeo uses “Do Not Track”.

At a glance

Block name: wpbb/video
Module: Content
Find it by searching: Video
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Product demos, testimonials and explainer videos.
Background-style muted, looping clips (with autoplay).
Videos hosted on your own site.

Example scenarios

Homepage: a YouTube product tour with a custom poster image.
Hero: a short self-hosted clip, autoplaying muted and looping, without controls.

How to add the Video block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Video in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Video in the results. The block appears with a field for the video address.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Video URL

What it does: The video to play.
What to enter or choose: A YouTube link (watch, youtu.be, shorts, live or embed links), a Vimeo link, or a video file ending in .mp4, .webm, .ogv, .ogg, .mov or .m4v. Or click Upload or choose from Media Library.
Default: Empty
How to use it: Paste a full address, including https://.
When to use it: Always.
Example: https://www.youtube.com/watch?v=aqz-KE-bpKQ.
Result: The video preview appears. Unrecognised addresses show the message “Unrecognised URL…”.
Good to know: If the address is empty or not recognised, nothing is shown on the site.

Settings panel: Video

Accessible title

What it does: A description of the video for screen-reader users.
What to enter or choose: A short title.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Always.
Example: “Product tour: creating your first project”.
Result: Used as the player’s title. Defaults to “Video”.

Aspect ratio

What it does: The shape of the player.
What to enter or choose: One of: 16:9, 4:3, 1:1, 9:16, 21:9.
Default: 16:9
How to use it: Open the dropdown and pick an option.
When to use it: Match the video: 16:9 for most, 9:16 for vertical phone videos, 21:9 for cinematic ones.
Example: 9:16 for a YouTube Short.
Result: The player area changes shape.

Rounded corners

What it does: Rounds the player corners.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
Example: On for the Donix look.
Result: Corners change.

Settings panel: Playback

Load player on click

What it does: Shows a poster and play button, and loads YouTube or Vimeo only when played.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep it on (faster, more private). Turn off only if you need the full player immediately.
Example: On for all YouTube embeds.
Result: On: a poster with a play button; the player loads on click and starts playing.
Good to know: Ignored when Autoplay is on.

Autoplay (muted)

What it does: Starts the video automatically, muted (browsers only allow muted autoplay).
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For short decorative clips.
Example: A silent looping hero clip.
Result: The video plays as soon as the page loads, without sound.

Muted

What it does: Starts without sound.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
Example: For background clips.
Result: Visitors can unmute with the controls.

Loop

What it does: Restarts the video when it ends.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
Example: Short ambient clips.
Result: Plays continuously.

Show controls

What it does: Shows the player’s play, volume and progress controls.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep on for normal videos; off only for decorative muted loops.
Example: Off for a background clip.
Result: Controls hide.

Settings panel: Poster image

Poster image

What it does: The picture shown before the video plays.
What to enter or choose: An image from the Media Library. Choose poster, Replace poster or Remove poster.
Default: 0
How to use it: Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
When to use it: To show a branded image instead of the video’s own thumbnail.
Example: A still with your logo.
Result: Shown before playback. Without one, YouTube videos use their own thumbnail (loaded from i.ytimg.com).

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Video offers.

Element: Player selected first

The player frame — border, corners and shadow.

Styles-tab controls for “Player”
Panel	Control	Per device	Available in states
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal

States: Normal only.

Element: Block

The wrapper (spacing, size, position, visibility).

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Spacing	Margin	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Effects	State transition (ms)	—	Normal
Effects	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Play button

The play button on the poster; its Hover state applies when the pointer is over the poster.

Styles-tab controls for “Play button”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal, Hover
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Hover — When the mouse pointer is over the whole block — so this part changes as soon as visitors point at the block.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Margin, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

With “Load player on click”, visitors first see the poster and a play button; clicking it replaces the poster with the player (a tiny script does this). Video files use the browser’s built-in player.

Accessibility

Give every video an Accessible title.
Avoid autoplay for videos with sound or important content; if you use autoplay, keep controls on so visitors can pause it.
Provide captions in the video itself (YouTube/Vimeo) for deaf and hard-of-hearing viewers.

Limitations and notes

Only YouTube, Vimeo and direct video files are supported.
Autoplay is always muted (a browser rule).

Troubleshooting

The video does not show on the site.

Check the address: it must be a YouTube or Vimeo link or a video file. Private YouTube videos cannot be embedded.