內容簡介
Video Player Block 是一款輕量級的 WordPress 外掛，讓使用者能夠在 Gutenberg 編輯器中嵌入並播放 YouTube、Vimeo 或自我託管的 MP4 影片，提供乾淨、響應式且可自訂的播放介面，無需撰寫任何程式碼。
【主要功能】
• 支援自我託管 MP4、WebM 和 OGG 格式
• 內建 YouTube 和 Vimeo 嵌入功能
• 直接在 Gutenberg 編輯器中添加影片
• 完全響應式設計，適應各種裝置
• 可自訂的播放控制選項
• 快速重播和快轉按鈕
外掛標籤
開發者團隊
② 後台搜尋「Video Player Block – play videos beautifully on any device」→ 直接安裝（推薦）
原文外掛簡介
Give every video on your site a clean, responsive, fully customizable player – YouTube, Vimeo, or self-hosted MP4 – right inside the Gutenberg editor, no code required.
Video Player Block | Pricing | Support | Documentation | Demo
Why Video Player Block?
Video Player Block is a lightweight WordPress video player plugin that lets you embed and play videos – YouTube, Vimeo, and self-hosted HTML5 (MP4, WebM, OGG) – in a clean, responsive, and customizable player directly inside the Gutenberg block editor.
Whether you are showcasing self-hosted MP4s or embedding YouTube and Vimeo videos, this Gutenberg video player block delivers a highly customizable video experience without writing any code – perfect for video tutorials, online courses, product demos, marketing videos, and podcast video episodes.
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 – along with HLS & DASH streaming and external sources like Amazon S3, DigitalOcean Spaces, and BunnyCDN.
Free Features
Default HTML5 Video Player: A clean, lightweight, and responsive player for standard self-hosted MP4, WebM, and OGG formats.
YouTube & Vimeo Native Support: Easily embed and play YouTube and Vimeo videos within the customizable player skin.
Native Gutenberg Block: Add videos directly from the WordPress editor with a dedicated, easy-to-use block.
Fully Responsive Design: Automatically adjusts the player for seamless viewing on desktops, tablets, and mobile devices.
Customizable Player Controls: Show or hide basic controls like play, volume, and fullscreen.
Rewind & Fast-Forward Buttons: Toggle dedicated seek backward and seek forward buttons on the player.
Player Restart Button: Add a dedicated button to easily restart the video from the beginning.
Download Button Toggle: Enable or disable the video download option for your viewers.
Picture-in-Picture & AirPlay: Toggle PiP and AirPlay options directly from the settings panel.
Shortcode Generator: Generate and insert video players anywhere using shortcodes for maximum flexibility.
Poster Image Selection: Choose custom video poster images directly from the WordPress media library.
Autoplay & Mute Options: Control video behavior on page load with simple toggle settings.
Lightweight & Fast: Built for performance so your pages stay fast and user-friendly.
Unlimited Video Players: Add multiple players anywhere on your website without restrictions.
Cross-Browser & iOS Friendly: Fully compatible with Chrome, Firefox, Safari, Edge, and mobile devices (iPhone/Android).
Pro Version – Unlock Professional Video Power
The Pro version adds advanced player engines, streaming support, and deep customization for professional video websites.
Advanced player engines:
React Video Player Engine: A cutting-edge player with complete customization based on React and Media Chrome.
Video.js Player Support: Industry-standard, high-compatibility media player layouts for professional websites.
Vidstack Player Engine: A premium, state-of-the-art player layout optimized for high performance.
Pro video blocks:
Video Gallery: Showcase multiple videos in grid, masonry, carousel, and bento layouts with category filters and an integrated lightbox player.
Video Playlist: Pair a video player with a clickable episode queue featuring chapters, auto-advance, watched-state persistence, and Netflix/YouTube-style sequential viewing.
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.
Video Reels: Build a vertical, swipe-driven short-form video feed (TikTok / Instagram Reels / YouTube Shorts style) for any post, page, or template.
Video Comparison: Reveal a draggable before/after slider that synchronously plays two videos side-by-side in real time.
Video Testimonial Card: Create conversion-focused social-proof cards pairing a customer photo, attributed quote, star rating, and an inline-playable video clip.
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.
Streaming, sources & styling:
HLS (.m3u8) & DASH (.mpd) Streaming: Deliver high-quality, modern adaptive video efficiently.
Mux Video Integration: Custom integration with Mux video servers for high-performance direct playback.
External Video Sources: Amazon S3, DigitalOcean Spaces, BunnyCDN, and other external hosting services.
Custom Aspect Ratios: Switch between 16:9, 4:3, 21:9, and custom dimensions.
Glassmorphism UI Controls: Apply blur and glassmorphic styling effects to player control backdrops.
Advanced Shadow & Borders: Custom player box shadows, border styles, and inner/outer border radius.
Multiple Subtitle Support: Add multilingual subtitle tracks (VTT) for global accessibility.
Playback Speed Control: Granular playback speed options (0.5x to 2.0x).
Lazy Loading & Preloading: Defer video loading until visible in viewport to maximize Core Web Vitals.
Google Cast & Chromecast: Wirelessly stream video from the browser player to any Chromecast-enabled TV.
How to Use – Quick Start
Install and activate the Video Player Block plugin.
Open the Gutenberg editor and search for “Video Player Block”.
Add the block to your post or page.
Upload a video or paste a YouTube/Vimeo URL.
Customize the player settings from the right sidebar.
Publish the page and enjoy your responsive video player.
For installation help, see the Installation tab.
Live Demo | Upgrade to Pro
Use Cases
Video Tutorials & Online Courses: Deliver lessons in a clean, distraction-free player.
Product Demos & Marketing Videos: Showcase products with poster images and custom controls.
Educational & Membership Sites: Publish unlimited videos across your content.
Portfolio & Media Websites: Present video work in a consistent, professional player.
Podcast Video Episodes: Embed episode videos alongside your show notes.
Did you like this plugin? Do you have a feature request? Please share your feedback with us.
Check out the Parent Plugin of this plugin-
B Blocks – A blocks collection and page building tool for Gutenberg.
Check out our other WordPress Plugins-
Html5 Video Player – Display videos as single and playlist in multiple skins.
PDF Poster – Display/Embed PDF files with different styles.
Html5 Audio Player – Listen audios with awesome visuals.
StreamCast – Customizable radio player with different skins.
3D Viewer – Embed 3D models and 3D products with interaction.
Advanced Post Block – Show posts and custom posts in different layouts.
Shortcodes
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.
[video_player id="123"]
Replace 123 with the ID of the Video Player post you have created via the Video Player custom post type menu.
Source Code
The non-minified source code for this plugin is available on our public repository:
GitHub Repository
Build Process
This plugin uses a build process to generate the production assets (JS/CSS) located in the build/ directory. The human-readable source code is available in the src/ directory.
To build the plugin from source:
1. Clone the repository: https://github.com/bPlugins/video-player-block-free
2. Install dependencies: npm install
3. Run the build command: npm run build
Build Tools Used: Webpack, Babel, PostCSS.
Third-Party Libraries
This plugin uses the following third-party libraries:
Plyr
Source / GitHub: https://github.com/sampotts/plyr
License: MIT – https://github.com/sampotts/plyr/blob/master/LICENSE.md
Purpose: Media player control wrapper for YouTube, Vimeo, and self-hosted HTML5 video files.
bpl-tools
Source / GitHub: https://github.com/bPlugins/bpl-tools
License: GPL-2.0-or-later – https://www.gnu.org/licenses/gpl-2.0.html
Purpose: Shared utility library providing admin dashboard components and common Gutenberg editor controls.
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
As the external service functionality is handled by bpl-tools as a third-party library, the following services are utilized:
bPlugins API
Service URL: https://api.bplugins.com
Purpose: The plugin’s admin dashboard fetches product comparison data and pricing information to display relevant upgrade options and feature details.
Data Sent: Only the plugin slug is transmitted; no personal or site data is collected.
Terms of Service: https://bplugins.com/terms-of-service/
Privacy Policy: https://bplugins.com/privacy-policy/
WordPress.org Plugins API
Service URL: https://api.wordpress.org/plugins/info/1.2/
Purpose: The admin dashboard queries the official WordPress.org Plugins API to retrieve and display a curated list of other plugins by the same author (“Our Plugins” section).
Data Sent: Plugin slugs and author name; no personal or site data is collected.
Terms of Service: https://wordpress.org/about/tos/
Privacy Policy: https://wordpress.org/about/privacy/
Freemius Lite SDK
Source: https://bplugins.com/
GitHub: https://github.com/bPlugins/freemius-lite-sdk
License: GPL-2.0-or-later – https://www.gnu.org/licenses/gpl-2.0.html
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.
External Services: Communicates with api.bplugins.com (activation events) and wp.freemius.com (opt-in processing) only after user opt-in. See bPlugins Privacy Policy and Freemius Privacy Policy.
Video Player Block by B Plugins
Source: https://github.com/bPlugins/video-player-block-free
License: GPL-2.0-or-later – https://www.gnu.org/licenses/gpl-2.0.html
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.
