WordPress.org

Polska

Pobierz WordPressa
WordPress.org

Plugin Directory

Story Video Block

Story Video Block

Autor: Akshat Saxena
Pobierz
Podgląd na żywo

Opis

Story Video Block is a block-editor (Gutenberg) video embed block. It pairs a video with a heading, description, and attribution, so it works just as well for a video testimonial or story-style layout as it does as a standalone video player — the „Video only” layout drops the text entirely for a clean, full-width embed.

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

Zrzuty ekranu

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.
Editor — Video only mode, with the heading, description, and color controls hidden and an optional fixed height.
Editor — Video only mode, with the heading, description, and color controls hidden and an optional fixed height.
Frontend — Video only mode; the video fills the whole card, with no surrounding text or background.
Frontend — Video only mode; the video fills the whole card, with no surrounding text or background.

Bloki

Wtyczka dodaje 1 blok.

  • Story Video Block A video and text section with lazy-loaded video embeds — or a standalone video player with Video only mode.

Instalacja

  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.

Najczęściej zadawane pytania

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.

Recenzje

Wtyczka nie ma jeszcze żadnej recenzji.

Kontrybutorzy i deweloperzy

„Story Video Block” jest oprogramowaniem open source. Poniższe osoby miały wkład w rozwój wtyczki.

Zaangażowani

Przetłumacz wtyczkę “Story Video Block” na swój język.

Interesuje cię rozwój wtyczki?

Przeglądaj kod, sprawdź repozytorium SVN lub czytaj dziennik rozwoju przez RSS.

Rejestr zmian

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.

1.0.1

  • Trimmed the readme’s tag list to the five WordPress.org accepts, so „vimeo” is no longer dropped.

1.0.0

  • 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).

0.1.1

  • Repositioned as a general video embed block (not testimonial-first) in the plugin description and readme.

0.1.0

  • Initial release.

Meta

Oceny

Nie przesłano jeszcze żadnych recenzji.

Twoja opinia

Zobacz wszystkierecenzje.

Zaangażowani

Wsparcie

Masz coś do dodania? Potrzebujesz pomocy?

Zobacz forum wsparcia