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

FAQ

Which video providers are supported?

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

Why does the block require a poster image?

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.

Can I change the block’s colors, fonts, or spacing without a child theme?

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.

Does this block track visitors or call any external service on page load?

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.

Is this block GDPR compliant for YouTube and Vimeo?

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.

Does using this block improve Google PageSpeed Insights & Core Web Vitals?

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.

Does it work with Full Site Editing (FSE) and Block Themes?

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.