Story Video Block – Fast Video Player, YouTube Embed & Testimonials for Gutenberg
| 开发者 | developerakshat |
|---|---|
| 更新时间 | 2026年10月15日 17:35 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPL-2.0-or-later |
| 版权网址: | 版权信息 |
详情介绍:
Video Walkthrough
Watch the complete walkthrough and see how easy it is to set up and customize the Story Video Block:
https://www.youtube.com/watch?v=Ilo0MwXbpRI
Story Video Block is a high-performance video embed and player block for the WordPress block editor (Gutenberg). It lazy-loads YouTube, Vimeo, Dailymotion, and self-hosted videos with a lightweight poster image (facade), so heavy third-party video players and tracking scripts only load when visitors press play — dramatically boosting your Google PageSpeed scores and Core Web Vitals.
Use it as a clean standalone video player ("Video only" mode), or pair videos with headings, quotes, and author avatars for stunning video testimonials and story-style sections.
Unlike traditional video embed blocks, nothing heavy is shipped to visitors just to swap a poster image for a video player: the click-to-play interaction runs on WordPress's native
@wordpress/interactivity module — zero React, zero jQuery, and no framework overhead loaded on the front end.
Key Features
- Boost PageSpeed & Core Web Vitals — Default YouTube/Vimeo embeds load megabytes of JavaScript and trackers on initial page visit. Story Video Block lazy-loads embeds on click, keeping your pages blazing fast.
- 100% GDPR & Privacy Friendly — Zero external tracking scripts or cookies are loaded until a visitor clicks play.
- One field, auto-detected — paste a URL from YouTube, Vimeo, Dailymotion, Facebook, Twitch, Wistia, Loom, TikTok, VideoPress, or a self-hosted
.mp4/.webm/.ogg/.movfile. The provider and video ID are detected automatically. - Poster image (facade) — auto-pulled from YouTube, Dailymotion, and Loom, or upload your own custom thumbnail for any provider.
- Click-to-load playback — no video player loads until the visitor clicks play, saving bandwidth and keeping your site speed top-notch.
- No React, no jQuery on the front end — the click-to-play interaction runs on WordPress's native
@wordpress/interactivitymodule (a script module, not a classic script), not a framework. - Configurable play button — 4 built-in icon shapes x 3 color styles, and extendable via WordPress filters if you want to bring your own icon library.
- Testimonial mode — swap the heading/description for a quote, author name, author title, and avatar.
- Video only mode — use it as a standalone video player: drops the heading, description, and testimonial content for a full-width embed, with an optional fixed height for consistent-sized players.
- Media position — video on the left or right of the content.
- Card style — standard, or an "overlapping media" look where the video pokes out above/below the card.
- Background & text color controls, plus CSS custom properties for everything else (padding, gap, radius, shadow, play-button colors, and more) so a theme can restyle the block without editing plugin files.
- Full Site Editing (FSE) & Block Theme Ready — Works out of the box with modern WordPress block themes.
- Transcript upload — attach a PDF/Word/text file for accessibility; renders as a labeled download link.
- Developer filters —
story_video_block_css_varsandstory_video_block_contentlet a theme or must-use plugin adjust the block's frontend CSS/markup fromfunctions.php. - Accessible by default — labeled controls,
aria-labels on interactive elements, decorative images marked as such, and visible "opens in a new tab" hints for screen readers.
安装:
- Upload the plugin files to the
/wp-content/plugins/story-video-blockdirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the 'Plugins' screen in WordPress.
- Add the "Story Video Block" block to any post or page and paste a video URL in the sidebar.
屏幕截图:
常见问题:
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
--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
--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
--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)
.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.
更新日志:
1.0.2
- Removed development-only files (Husky git hooks and the ESLint config) that were accidentally included in the plugin download. No changes to the block itself.
- Trimmed the readme's tag list to the five WordPress.org accepts, so "vimeo" is no longer dropped.
- New "Video only" layout — use the block as a standalone video player: the heading, description, and testimonial content are dropped and the video fills the card edge to edge. Optional fixed height for consistent-sized players.
- Text color is now applied. It was a documented setting that never reached the front end, so body text always rendered white regardless of the background.
- Fixed the embed being letterboxed inside its own box, which left the card background showing down either side.
- The inspector now hides settings that can't apply in Video only mode (media position, card style, testimonial, content, and colour).
- Repositioned as a general video embed block (not testimonial-first) in the plugin description and readme.
- Initial release.