WordPress.org
Get WordPress
WordPress.org

Plugin Directory

Story Video Block

Story Video Block

By Akshat Saxena
Download

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-labels 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.
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.
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.
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.
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.
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

Translate “Story Video Block” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

0.1.0

  • Initial release.

Meta

Ratings

No reviews have been submitted yet.

Your review

See all reviews

Contributors

Support

Got something to say? Need help?

View support forum