Video Block
Self-hosted HTML5 video with poster image, autoplay options, loop, and control visibility. Upload video files (MP4, WebM) directly from the WordPress media library.
WHAT IT CREATES
Standard video with controls
Background video (no controls, autoplay, loop)
When to use this block
- Product demos, explainer videos, tutorials
- Background videos (autoplay + loop + no controls)
- Scroll-triggered video that plays when visible
Poster Image
A thumbnail shown before the video plays. Upload from the media library. Without a poster, the browser shows a blank frame or the first video frame.
Poster
Sidebar Panel
Poster Image
WITH POSTER
Playback Options
Control how and when the video plays. Combine these toggles for different use cases.
Playback
Sidebar Panel
Autoplay
Autoplay on scroll
Loop
Hide controls
Autoplay
Starts playing immediately on page load. Browsers require the video to be muted for autoplay to work — the block handles this automatically.
Autoplay on scroll
Starts playing when the video scrolls into the viewport. Uses IntersectionObserver. The video is muted but does not get the autoplay attribute — playback is triggered by JavaScript.
Common combinations
Standard video
Autoplay: off
Loop: off
Controls: shown
Background video
Autoplay: on
Loop: on
Controls: hidden
Scroll-triggered
Autoplay on scroll: on
Loop: on
Controls: hidden
Custom Play Icon
Upload a custom play button icon to replace the browser’s default. This is shown over the poster image in the editor preview.
Editor only. The custom play icon is used in the Gutenberg editor preview. It is not rendered in the frontend HTML output — the browser’s native video controls handle playback on the live site.
Spacing
Padding (top and bottom only) and margin. Responsive across breakpoints.
Responsive: Mobile Tablet Desktop
No border, border-radius, background, or shadow on this block. No left/right padding either. Wrap in a Grid Item for those features.
All Available Controls
Video Upload MP4/WebM from media library
mediaUrl / mediaId: the video file. Block renders nothing if mediaUrl is empty. Video always renders at width:100%; height:auto.
Poster Image Thumbnail before play
posterUrl / posterId: image shown before video plays. Omitted entirely if empty (not even poster="").
Autoplay On load or on scroll into view
autoplay: plays on page load (adds muted automatically). autoplayOnEnter: plays when scrolled into view via IntersectionObserver (adds muted but not autoplay attribute).
Loop Repeat playback
loop: boolean. Video restarts automatically when it ends.
Hide Controls Remove native playback UI
hideControls: removes the browser’s native play/pause/seek bar. Typically used with autoplay for background-style videos.
Spacing Padding (top/bottom) & margin, 3 breakpoints
Padding: paddingTop/paddingBottom (+Md/Lg) — no left/right padding. Margin: marginTop/Bottom/Left/Right (+Md/Lg). All in px.