Embed and play videos easily in the Gutenberg editor with a customizable and responsive Video Player Block for WordPress.

Abu Hayat

bPlugins

Charles Cormier

Himangsu Roy

Video Player Block is a powerful and versatile WordPress plugin that lets you embed and play videos with style. Beyond the standard HTML5 player, the Pro version unlocks industry-leading engines like React Video Player, Video.js, and Vidstack, plus a full suite of Pro blocks — Video Gallery, Playlist, Lightbox, Reels, Comparison, Testimonial Card, and Transcript — making it the ultimate tool for professional video sites.
Whether you are showcasing YouTube, Vimeo, self-hosted MP4s, or external media from services like Amazon S3 or BunnyCDN, this plugin provides a clean, responsive, and highly customizable video experience directly within the Gutenberg editor.
<a href="https://bplugins.com/products/video-player-block/" rel="nofollow ugc">Video Player Block</a> | <a href="https://bplugins.com/docs/video-player-block/" rel="nofollow ugc">Documentation</a> | <a href="https://bblockswp.com/demo/video-player-block-all-demos/" rel="nofollow ugc">Demos</a>
<h3>Key Features – Free Version</h3>
<ul>
<li>
Default HTML5 Video Player: A clean, lightweight, and responsive player for standard self-hosted MP4, WebM, and OGG formats.
</li>
<li>
YouTube & Vimeo Native Support: Easily embed and play YouTube and Vimeo videos within the customizable player skin.
</li>
<li>
Native Gutenberg Block: Add videos directly from the WordPress editor with a dedicated, easy-to-use block.
</li>
<li>
Fully Responsive Design: Automatically adjusts the video player for seamless viewing on desktops, tablets, and mobile devices.
</li>
<li>
Customizable Player Controls: Easily show or hide basic player controls like play, volume, and fullscreen.
</li>
<li>
Rewind & Fast-Forward Buttons: Toggle dedicated seek backward and seek forward buttons on the player.
</li>
<li>
Player Restart Button: Add a dedicated button to easily restart the video from the beginning.
</li>
<li>
Download Button Toggle: Easily enable or disable the video download option for your viewers.
</li>
<li>
Picture-in-Picture & AirPlay: Toggle PiP and AirPlay options directly from the settings panel.
</li>
<li>
Shortcode Generator: Generate and insert video players anywhere using shortcodes for maximum flexibility.
</li>
<li>
Poster Image Selection: Choose and display custom video poster images directly from the WordPress media library.
</li>
<li>
Autoplay & Mute Options: Control video behavior on page load with simple toggle settings.
</li>
<li>
Lightweight & Fast: Built for performance to ensure your pages stay fast and user-friendly.
</li>
<li>
Unlimited Video Players: Add multiple video players anywhere on your website without any restrictions.
</li>
<li>
Cross-Browser & iOS Friendly: Fully compatible with Chrome, Firefox, Safari, Edge, and mobile devices (iPhone/Android).
</li>
</ul>
<h3>Pro Version – Unlock Professional Video Power</h3>
The Pro version adds advanced player engines, streaming support, and deep customization for professional video websites.
<h3>What’s New in PRO?</h3>
<h4>Advanced Player Engines & Blocks</h4>
<ul>
<li>
React Video Player Engine: Access a cutting-edge player with complete customization based on React and Media Chrome.
</li>
<li>
Video.js Player Support: Deliver industry-standard, high-compatibility media player layouts for professional websites.
</li>
<li>
Vidstack Player Engine: Experience a premium, state-of-the-art player layout optimized for high performance.
</li>
</ul>
<h4>Pro Video Blocks</h4>
<ul>
<li>
Video Gallery: Showcase multiple videos in grid, masonry, carousel, and bento layouts with category filters and an integrated lightbox player.
</li>
<li>
Video Playlist: Pair a video player with a clickable episode queue featuring chapters, auto-advance, watched-state persistence, and Netflix/YouTube-style sequential viewing.
</li>
<li>
Video Lightbox: Add a click-to-play trigger (thumbnail, button, or play-icon overlay) that opens any supported video in a responsive modal, deferring heavy player assets until the visitor opts in.
</li>
<li>
Video Reels: Build a vertical, swipe-driven short-form video feed (TikTok / Instagram Reels / YouTube Shorts style) for any post, page, or template.
</li>
<li>
Video Comparison: Reveal a draggable before/after slider that synchronously plays two videos side-by-side in real time.
</li>
<li>
Video Testimonial Card: Create conversion-focused social-proof cards pairing a customer photo, attributed quote, star rating, and an inline-playable video clip.
</li>
<li>
Video Transcript: Display a synchronized, clickable transcript alongside any video so viewers can jump to any moment and search engines can index the spoken content.
</li>
</ul>
<h4>Streaming, Sources & Styling</h4>
<ul>
<li>
HLS (.m3u8) Streaming: Support for professional HLS streaming to deliver high-quality video efficiently.
</li>
<li>
DASH (.mpd) Streaming: Support for professional MPEG-DASH streaming to deliver modern adaptive video.
</li>
<li>
Mux Video Integration: Custom integration with Mux video servers for high-performance direct playback.
</li>
<li>
External Video Sources: Support for Amazon S3, DigitalOcean Spaces, BunnyCDN, and other external hosting services.
</li>
<li>
Custom Aspect Ratios: Change player layouts dynamically between 16:9, 4:3, 21:9, and custom dimensions.
</li>
<li>
Glassmorphism UI Controls: Apply stunning blur and glassmorphic styling effects to player control backdrops.
</li>
<li>
Advanced Shadow & Borders: Configure custom player box shadows, border styles, and inner/outer border radius.
</li>
<li>
Multiple Subtitle Support: Add multilingual subtitle tracks (VTT) for global accessibility.
</li>
<li>
Playback Speed Control: Custom granular playback speed options (0.5x to 2.0x) for professional viewers.
</li>
<li>
Lazy Loading & Preloading: Defer video loading until visible in viewport to maximize Core Web Vitals.
</li>
<li>
Google Cast & Chromecast: Wirelessly stream video content from the browser player to any Chromecast-enabled TV.
</li>
</ul>
Try the Pro Version – Unlock the full potential of your video content today!
<h3>How to Use – Step-by-Step Setup</h3>
Getting started is easy!
<ol>
<li>Install and activate the Video Player Block plugin.</li>
<li>Open the Gutenberg editor.</li>
<li>Search for “Video Player Block”.</li>
<li>Add the block to your post or page.</li>
<li>Upload or select a video.</li>
<li>Customize the player settings from the right sidebar.</li>
<li>Publish the page and enjoy your responsive video player.</li>
</ol>
For installation help click on Installation Tab
<a href="https://bblockswp.com/demo/video-player-block-all-demos/" rel="nofollow ugc">Live Demo</a> | <a href="https://bplugins.com/products/video-player-block-pro/" rel="nofollow ugc">Upgrade to Pro</a>
<h3>Perfect For</h3>
<ul>
<li>Video tutorials</li>
<li>Online courses</li>
<li>Product demonstrations</li>
<li>Marketing videos</li>
<li>Educational websites</li>
<li>Portfolio websites</li>
<li>Media websites</li>
<li>Podcast video episodes</li>
<li>Membership platforms</li>
</ul>
<h4>Feedback</h4>
<ul>
<li>Did you like this plugin? Dislike it? Do you have a feature request? <a href="mailto:support@bplugins.com" title="Send feedback" rel="nofollow ugc">Please share your feedback with us</a></li>
</ul>
<h3>Check out the Parent Plugin of this plugin-</h3>
<a href="https://bblockswp.com" rel="nofollow ugc">B Blocks</a> – A blocks collection and page building tool for Gutenberg.
<h3>Check out our other WordPress Plugins-</h3>
<a href="https://bplugins.com/products/html5-video-player/" rel="nofollow ugc">Html5 Video Player</a> – Display videos as single and playlist in multiple skins.
<a href="https://bplugins.com/products/pdf-poster/" rel="nofollow ugc">PDF Poster</a> – Display/Embed PDF files with different styles.
<a href="https://bplugins.com/products/html5-audio-player/" rel="nofollow ugc">Html5 Audio Player</a> – Listen audios with awesome visuals.
<a href="https://bplugins.com/products/streamcast-radio-player/" rel="nofollow ugc">StreamCast</a> – Customizable radio player with different skins.
<a href="https://bplugins.com/products/3d-viewer/" rel="nofollow ugc">3D Viewer</a> – Embed 3D models and 3D products with interaction.
<a href="https://bplugins.com/products/advanced-post-block/" rel="nofollow ugc">Advanced Post Block</a> – Show posts and custom posts in different layouts.
<h3>Third-Party Libraries</h3>
This plugin uses the following third-party libraries:
<h4>Plyr</h4>
<ul>
<li>Source / GitHub: https://github.com/sampotts/plyr</li>
<li>License: MIT – https://github.com/sampotts/plyr/blob/master/LICENSE.md</li>
<li>Purpose: Media player control wrapper for YouTube, Vimeo, and self-hosted HTML5 video files.</li>
</ul>
<h4>bpl-tools</h4>
<ul>
<li>Source / GitHub: https://github.com/bPlugins/bpl-tools</li>
<li>License: GPL-2.0-or-later – https://www.gnu.org/licenses/gpl-2.0.html</li>
<li>Purpose: Shared utility library providing admin dashboard components and common Gutenberg editor controls.</li>
<li>External Services: The library may connect to bPlugins, WordPress.org, and Freemius services for product data and checkout functionality. See full details: https://github.com/bPlugins/bpl-tools#external-requests–why-they-are-made</li>
</ul>
<h4>Freemius Lite SDK</h4>
<ul>
<li>Source: <a href="https://bplugins.com/" rel="nofollow ugc">https://bplugins.com/</a></li>
<li>GitHub: <a href="https://github.com/bPlugins/freemius-lite-sdk" rel="nofollow ugc">https://github.com/bPlugins/freemius-lite-sdk</a></li>
<li>License: GPL-2.0-or-later – <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">https://www.gnu.org/licenses/gpl-2.0.html</a></li>
<li>Purpose: Provides an opt-in consent form for usage tracking and analytics to help improve the plugin. No data is sent before explicit user consent.</li>
<li>External Services: Communicates with <code>api.bplugins.com</code> (activation events) and <code>wp.freemius.com</code> (opt-in processing) only after user opt-in. See <a href="https://bplugins.com/privacy-policy" rel="nofollow ugc">bPlugins Privacy Policy</a> and <a href="https://freemius.com/privacy/" rel="nofollow ugc">Freemius Privacy Policy</a>.</li>
</ul>
<h4>Video Player Block by B Plugins</h4>
<ul>
<li>Source: <a href="https://github.com/bPlugins/video-player-block-free" rel="nofollow ugc">https://github.com/bPlugins/video-player-block-free</a></li>
<li>License: GPL-2.0-or-later – <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">https://www.gnu.org/licenses/gpl-2.0.html</a></li>
<li>Purpose: A Gutenberg block for embedding and playing videos with support for YouTube, Vimeo, and self-hosted HTML5 video files. Includes customizable controls, responsiveness, and various playback options.</li>
</ul>
<h3>Build Process</h3>
This plugin uses a build process to generate the production assets (JS/CSS) located in the <code>build/</code> directory. The human-readable source code is available in the <code>src/</code> directory.
To build the plugin from source: 
1. Clone the repository: https://github.com/bPlugins/video-player-block-free 
2. Install dependencies: <code>npm install</code> 
3. Run the build command: <code>npm run build</code>
Build Tools Used: Webpack, Babel, PostCSS.
<h3>Shortcodes</h3>
This plugin provides a shortcode to embed a saved Video Player anywhere in classic content, widgets, or page builders that do not support Gutenberg blocks.
<pre><code>[video_player id="123"]
</code></pre>
Replace <code>123</code> with the ID of the Video Player post you have created via the Video Player custom post type menu.

Alternatives to Video Player Block

Top alternatives