Story Video Block is a Gutenberg video block that pairs a video with a heading, description, and attribution \u2014 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.<\/p>\n\n
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 YouTube, Vimeo, Dailymotion, Facebook, Twitch, Wistia, Loom, TikTok, VideoPress, and self-hosted video files ( 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.<\/p><\/dd>\n Yes. Every visual value is a CSS custom property. Add a filter in your theme's Every variable the block reads (with its default) \u2014 set any subset of these from the filter above:<\/p>\n\n Card<\/strong><\/p>\n\n Media (video\/facade\/poster)<\/strong><\/p>\n\n Play button<\/strong><\/p>\n\n Testimonial quote & author<\/strong><\/p>\n\n Anything not covered by a variable can still be styled with plain CSS targeting 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.<\/p><\/dd>\n\n<\/dl>\n\n\n@wordpress\/interactivity<\/code> module \u2014 no React, no jQuery, no extra framework loaded on the front end.<\/p>\n\nFeatures<\/h4>\n\n
\n
.mp4<\/code>\/.webm<\/code>\/.ogg<\/code>\/.mov<\/code> file. The provider and video ID are detected automatically.<\/li>\n@wordpress\/interactivity<\/code> 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.<\/li>\nstory_video_block_css_vars<\/code> and story_video_block_content<\/code> let a theme or must-use plugin adjust the block's frontend CSS\/markup from functions.php<\/code>.<\/li>\naria-label<\/code>s on interactive elements, decorative images marked as such, and visible \"opens in a new tab\" hints for screen readers.<\/li>\n<\/ul>\n\n\n\n
\/wp-content\/plugins\/story-video-block<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n\n
Which video providers are supported?<\/h3><\/dt>\n
.mp4<\/code>, .webm<\/code>, .ogg<\/code>, .mov<\/code>).<\/p><\/dd>\nWhy does the block require a poster image?<\/h3><\/dt>\n
Can I change the block's colors, fonts, or spacing without a child theme?<\/h3><\/dt>\n
functions.php<\/code>:<\/p>\n\nadd_filter( 'story_video_block_css_vars', function ( $vars ) {\n $vars['--story-video-block-bg'] = '#000';\n $vars['--story-video-block-font-family'] = '\"Poppins\", sans-serif';\n return $vars;\n}, 10, 3 );\n<\/code><\/pre>\n\n\n
--story-video-block-bg<\/code> (#21759b<\/code>) \u2014 background color<\/li>\n--story-video-block-color<\/code> (#fff<\/code>) \u2014 text color<\/li>\n--story-video-block-font-family<\/code> (inherit<\/code>) \u2014 font<\/li>\n--story-video-block-padding<\/code> (24px<\/code>) \u2014 card padding<\/li>\n--story-video-block-gap<\/code> (32px<\/code>) \u2014 gap between media and content<\/li>\n--story-video-block-media-overflow<\/code> (80px<\/code>) \u2014 how far media pokes out in the \"overlapping media\" card style<\/li>\n--story-video-block-block-gap<\/code> (40px<\/code>) \u2014 extra spacing reserved above\/below for that same overlap<\/li>\n<\/ul>\n\n\n
--story-video-block-radius<\/code> (12px<\/code>) \u2014 corner rounding<\/li>\n--story-video-block-shadow<\/code> (0 8px 24px rgba(0,0,0,.25)<\/code>) \u2014 drop shadow<\/li>\n--story-video-block-media-margin-bottom<\/code> (12px<\/code>)<\/li>\n--story-video-block-facade-bg<\/code> (#000<\/code>) \u2014 poster background before the image loads<\/li>\n<\/ul>\n\n\n
--story-video-block-play-btn-size<\/code> (64px<\/code>), --story-video-block-play-btn-padding<\/code> (18px<\/code>), --story-video-block-play-btn-radius<\/code> (50%<\/code>), --story-video-block-play-btn-bg<\/code> (rgba(255,255,255,.9)<\/code>), --story-video-block-play-btn-color<\/code> (#111<\/code>) \u2014 default style<\/li>\n--story-video-block-play-btn-minimal-size<\/code> (56px<\/code>), --story-video-block-play-btn-minimal-color<\/code> (#fff<\/code>), --story-video-block-play-btn-minimal-shadow<\/code> \u2014 \"minimal\" style<\/li>\n--story-video-block-play-btn-branded-size<\/code> (80px<\/code>), --story-video-block-play-btn-branded-padding<\/code> (22px<\/code>), --story-video-block-play-btn-branded-bg<\/code> (#e63946<\/code>), --story-video-block-play-btn-branded-color<\/code> (#fff<\/code>) \u2014 \"branded\" style<\/li>\n<\/ul>\n\n\n
--story-video-block-quote-margin<\/code> (0 0 16px<\/code>), --story-video-block-quote-size<\/code> (1.25em<\/code>)<\/li>\n--story-video-block-quote-mark-open<\/code> (\u201c<\/code>), --story-video-block-quote-mark-close<\/code> (\u201d<\/code>)<\/li>\n--story-video-block-author-gap<\/code> (12px<\/code>), --story-video-block-avatar-size<\/code> (48px<\/code>)<\/li>\n--story-video-block-author-name-weight<\/code> (600<\/code>), --story-video-block-author-title-opacity<\/code> (0.8<\/code>)<\/li>\n<\/ul>\n\n.wp-block-create-block-story-video-block<\/code> from your theme, or via the story_video_block_content<\/code> filter for full markup control.<\/p><\/dd>\nDoes this block track visitors or call any external service on page load?<\/h3><\/dt>\n
0.1.0<\/h4>\n\n
\n