Title: Story Video Block Author: Akshat Saxena Published: August 19, 2026 Last modified: August 19, 2026 --- Search plugins ![](https://ps.w.org/story-video-block/assets/banner-772x250.gif?rev=3653938) ![](https://ps.w.org/story-video-block/assets/icon-256x256.gif?rev=3653938) # Story Video Block By [Akshat Saxena](https://profiles.wordpress.org/developerakshat/) [Download](https://downloads.wordpress.org/plugin/story-video-block.0.1.0.zip) * [Details](https://wordpress.org/plugins/story-video-block/#description) * [Reviews](https://wordpress.org/plugins/story-video-block/#reviews) * [Installation](https://wordpress.org/plugins/story-video-block/#installation) * [Development](https://wordpress.org/plugins/story-video-block/#developers) [Support](https://wordpress.org/support/plugin/story-video-block/) ## Description Story Video Block is a Gutenberg video block that pairs a video with a heading, description, and attribution — built for video testimonial and story-style page sections. Paste a YouTube, Vimeo, or other video URL, add a poster image, and the block handles a fast, click-to-play embed automatically. Unlike most video blocks, nothing 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 — no React, no jQuery, no extra framework loaded on the front end. #### Features * **One field, auto-detected** — paste a URL from YouTube, Vimeo, Dailymotion, Facebook, Twitch, Wistia, Loom, TikTok, VideoPress, or a self-hosted `.mp4`/`. webm`/`.ogg`/`.mov` file. The provider and video ID are detected automatically. * **Poster image** — auto-pulled from YouTube, Dailymotion, and Loom, or upload your own for any provider. * **Click-to-load playback** — no video player loads until the visitor clicks play, keeping the page fast. * **No React, no jQuery on the front end** — the click-to-play interaction runs on WordPress’s native `@wordpress/interactivity` module (a script module, not a classic script), not a framework. Nothing is shipped to visitors just to swap a poster image for a video embed. * **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. * **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 color control**, 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. * **Transcript upload** — attach a PDF/Word/text file for accessibility; renders as a labeled download link. * **Developer filters** — `story_video_block_css_vars` and `story_video_block_content` let a theme or must-use plugin adjust the block’s frontend CSS/markup from `functions. php`. * **Accessible by default** — labeled controls, `aria-label`s on interactive elements, decorative images marked as such, and visible “opens in a new tab” hints for screen readers. ## Screenshots [⌊Editor — standard layout, with the Video, Layout, Testimonial, and Content settings in the sidebar and a dedicated Styles tab for background and text color.⌉⌊Editor— standard layout, with the Video, Layout, Testimonial, and Content settings in the sidebar and a dedicated Styles tab for background and text color.⌉[ Editor — standard layout, with the Video, Layout, Testimonial, and Content settings in the sidebar and a dedicated Styles tab for background and text color. [⌊Frontend — standard layout with a YouTube video.⌉⌊Frontend — standard layout with a YouTube video.⌉[ Frontend — standard layout with a YouTube video. [⌊Editor — media-left layout with a Dailymotion video.⌉⌊Editor — media-left layout with a Dailymotion video.⌉[ Editor — media-left layout with a Dailymotion video. [⌊Frontend — media-left layout with a Dailymotion video.⌉⌊Frontend — media-left layout with a Dailymotion video.⌉[ Frontend — media-left layout with a Dailymotion video. [⌊Editor — overlapping media card style with a Twitch video.⌉⌊Editor — overlapping media card style with a Twitch video.⌉[ Editor — overlapping media card style with a Twitch video. [⌊Frontend — overlapping media card style; the video pokes out above and below the card.⌉⌊Frontend — overlapping media card style; the video pokes out above and below the card.⌉[ Frontend — overlapping media card style; the video pokes out above and below the card. [⌊Editor — testimonial mode with a quote, author, and a Facebook video.⌉⌊Editor — testimonial mode with a quote, author, and a Facebook video.⌉[ Editor — testimonial mode with a quote, author, and a Facebook video. [⌊Frontend — testimonial mode with a quote, author, and a Facebook video.⌉⌊Frontend— testimonial mode with a quote, author, and a Facebook video.⌉[ Frontend — testimonial mode with a quote, author, and a Facebook video. [⌊Editor — branded play button style with a Loom video.⌉⌊Editor — branded play button style with a Loom video.⌉[ Editor — branded play button style with a Loom video. [⌊Frontend — branded play button style with a Loom video.⌉⌊Frontend — branded play button style with a Loom video.⌉[ Frontend — branded play button style with a Loom video. ## Blocks This plugin provides 1 block. * Story Video Block A video and text section with lazy-loaded video embeds. ## Installation 1. Upload the plugin files to the `/wp-content/plugins/story-video-block` directory, or install the plugin through the WordPress plugins screen directly. 2. Activate the plugin through the ‘Plugins’ screen in WordPress. 3. Add the “Story Video Block” block to any post or page and paste a video URL in the sidebar. ## 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-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. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Story Video Block” is open source software. The following people have contributed to this plugin. Contributors * [ Akshat Saxena ](https://profiles.wordpress.org/developerakshat/) [Translate “Story Video Block” into your language.](https://translate.wordpress.org/projects/wp-plugins/story-video-block) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/story-video-block/), check out the [SVN repository](https://plugins.svn.wordpress.org/story-video-block/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/story-video-block/) by [RSS](https://plugins.trac.wordpress.org/log/story-video-block/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 0.1.0 * Initial release. ## Meta * Version **0.1.0** * Last updated **1 day ago** * Active installations **Fewer than 10** * WordPress version ** 6.8 or higher ** * Tested up to **7.0.4** * PHP version ** 7.4 or higher ** * Tags * [gutenberg](https://wordpress.org/plugins/tags/gutenberg/)[Testimonial](https://wordpress.org/plugins/tags/testimonial/) [video](https://wordpress.org/plugins/tags/video/)[video player](https://wordpress.org/plugins/tags/video-player/) [youtube](https://wordpress.org/plugins/tags/youtube/) * [Advanced View](https://wordpress.org/plugins/story-video-block/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/story-video-block/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/story-video-block/reviews/) ## Contributors * [ Akshat Saxena ](https://profiles.wordpress.org/developerakshat/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/story-video-block/)