Story Video Block – Fast Video Player, YouTube Embed & Testimonials for Gutenberg

YouTube, Vimeo, Dailymotion, Facebook, Twitch, Wistia, Loom, TikTok, VideoPress, and self-hosted video files (.mp4, .webm, .ogg, .mov).

The play button overlays a poster image so the real video embed isn't loaded until a visitor actually presses play. For providers without an automatic thumbnail, you'll need to upload one.

Yes. Every visual value is a CSS custom property. Add a filter in your theme's functions.php: add_filter( 'story_video_block_css_vars', function ( $vars ) { $vars['--story-video-block-bg'] = '#000'; $vars['--story-video-block-font-family'] = '"Poppins", sans-serif'; return $vars; }, 10, 3 ); Every variable the block reads (with its default) — set any subset of these from the filter above: Card --story-video-block-bg (#21759b) — background color --story-video-block-color (#fff) — text color --story-video-block-font-family (inherit) — font --story-video-block-padding (24px) — card padding --story-video-block-gap (32px) — gap between media and content --story-video-block-media-overflow (80px) — how far media pokes out in the "overlapping media" card style --story-video-block-block-gap (40px) — extra spacing reserved above/below for that same overlap Media (video/facade/poster) --story-video-block-radius (12px) — corner rounding --story-video-block-shadow (0 8px 24px rgba(0,0,0,.25)) — drop shadow --story-video-block-media-margin-bottom (12px) --story-video-block-video-only-height (unset) — fixed media height in the "Video only" layout; unset keeps the natural 16:9 ratio --story-video-block-facade-bg (#000) — poster background before the image loads Play button --story-video-block-play-btn-size (64px), --story-video-block-play-btn-padding (18px), --story-video-block-play-btn-radius (50%), --story-video-block-play-btn-bg (rgba(255,255,255,.9)), --story-video-block-play-btn-color (#111) — default style --story-video-block-play-btn-minimal-size (56px), --story-video-block-play-btn-minimal-color (#fff), --story-video-block-play-btn-minimal-shadow — "minimal" style --story-video-block-play-btn-branded-size (80px), --story-video-block-play-btn-branded-padding (22px), --story-video-block-play-btn-branded-bg (#e63946), --story-video-block-play-btn-branded-color (#fff) — "branded" style Testimonial quote & author --story-video-block-quote-margin (0 0 16px), --story-video-block-quote-size (1.25em) --story-video-block-quote-mark-open (“), --story-video-block-quote-mark-close (”) --story-video-block-author-gap (12px), --story-video-block-avatar-size (48px) --story-video-block-author-name-weight (600), --story-video-block-author-title-opacity (0.8) Anything not covered by a variable can still be styled with plain CSS targeting .wp-block-create-block-story-video-block from your theme, or via the story_video_block_content filter for full markup control.

No. Nothing loads until a visitor clicks play, at which point the browser requests the embed directly from the video provider (e.g. YouTube) the same way any embedded video would.

Yes. Because it uses a poster image (facade) and does not embed the third-party iframe or execute external scripts until a visitor clicks the play button, no third-party tracking cookies or scripts are loaded when the page initially renders.

Yes, significantly. Standard video embeds load massive JavaScript files, stylesheets, and tracking requests upfront, hurting metrics like Largest Contentful Paint (LCP) and Total Blocking Time (TBT). By lazy-loading the real player on click, your pages load much faster.

Yes. Story Video Block is built strictly with modern Gutenberg standards and works seamlessly in post/page content, query loops, templates, and template parts across classic and block themes.