Video Player Block Pro: Gutenberg Video Layouts and Streaming

Start with a video in Gutenberg

Video Player Block Pro extends the Video Player Block with more playback engines, streaming settings, external sources, and dedicated video layouts. The standard player handles YouTube and Vimeo embeds, plus self-hosted HTML5 video in MP4, WebM, and OGG formats. Its responsive layout adjusts to desktop, tablet, and mobile screens.

Choose a poster image from the WordPress media library and set autoplay or mute behavior. Controls can include playback, volume, fullscreen, seeking, restart, downloads, Picture-in-Picture, and AirPlay. You can also set aspect ratios, subtitles, and playback speed from 0.5x to 2.0x.

Choose a playback engine

The Pro edition offers three engine options. Each uses a different player implementation:

• React Video Player: built with React and Media Chrome, with customization options.
• Video.js: offers high-compatibility media player layouts.
• Vidstack: a modern player layout focused on performance.

Pick a layout for the viewing task

Use a gallery or playlist when users need to view a collection. A lightbox starts from a trigger, while Reels presents videos in a vertical, swipe-driven feed.

• Video Gallery: arrange videos in grid, masonry, carousel, or bento layouts, with category filters and an integrated lightbox player.
• Video Playlist: pair a player with a clickable episode queue, chapters, automatic advance, and watched-state persistence.
• Video Lightbox: open a supported video in a responsive modal from a thumbnail, button, or play-icon overlay. Player assets load when the visitor chooses to play.
• Video Reels: make a vertical, swipe-driven short-form feed for a post, page, or template.
• Video Comparison: show two videos side by side with a draggable before-and-after slider and synchronized playback.
• Video Testimonial Card: pair a customer photo and attributed quote with a star rating and playable video clip.
• Video Transcript: show a synchronized, clickable transcript so viewers can jump to a moment or search the spoken content.

Connect streaming and external sources

For streaming processes, Pro works with HLS (.m3u8) and DASH (.mpd). It also integrates with Mux video servers and supports external sources such as Amazon S3, DigitalOcean Spaces, and BunnyCDN.

Player styling options include custom dimensions, glass-style control backdrops, shadows, and border settings. You can defer video loading until it enters the viewport or preload it, add multilingual VTT subtitle tracks, and use Google Cast or Chromecast to send video to a compatible TV.

Add a player to a page

In Gutenberg, insert the Video Player block, select a video source, then set the player and its controls. For a collection, choose a gallery or playlist; for a triggered modal, use the lightbox; for a vertical feed, use Reels. Five ready-made inserter patterns cover a full-width hero, a product demo beside its copy, a lesson, a customer story, and a podcast episode.

A shortcode generator lets you insert a saved player in classic content, widgets, or page builders that support shortcodes. Add the relevant block or shortcode to the post, page, or template where the video should appear.