Media · Gutenberg
Video Playlist block for WordPress
A video player paired with a clickable episode/chapter list — perfect for course previews, tutorial series and video podcasts.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A video player paired with a clickable episode/chapter list — perfect for course previews, tutorial series and video podcasts.
Inspector panels on this block: Layout, Visibility, Episodes. Those titles come from index.js, not from a shared template.
Behavior controls: “Orientation” options: Side by Side, Stacked (episodes below); “Episode List Position” options: Right, Left; “Type” options: YouTube, Vimeo, Direct URL (mp4).
Where to find it
Gutenberg inserter → Media → search “Video Playlist” (block name `blockenberg/video-playlist` in block.json). Style it in the sidebar after insert.
How to use Video Playlist block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Video Playlist”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Layout. Set “Orientation”, “Episode List Position”, “Episode List Width (px)”, “Border Radius (px)”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Orientation | Select control; the chosen value is saved on the block. Options: Side by Side; Stacked (episodes below). block.json default: side. Saved as `layout`. |
| Episode List Position | Select control; the chosen value is saved on the block. Options: Right; Left. block.json default: right. Saved as `listPosition`. |
| Episode List Width (px) | Numeric range control in the inspector. Range 240–500. block.json default: 340. Saved as `listWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingBottom`. |
| Show Playlist Title | On/off toggle in the inspector. On by default. Saved as `showPlaylistTitle`. |
| Show Episode Numbers | On/off toggle in the inspector. On by default. Saved as `showNumbers`. |
| Show Duration | On/off toggle in the inspector. On by default. Saved as `showDuration`. |
| Show Description under player | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show Thumbnails | On/off toggle in the inspector. On by default. Saved as `showThumbnails`. |
| Block Background | Color control in the inspector. block.json default: #0f0f1a. Saved as `bgColor`. |
| Player Background | Color control in the inspector. block.json default: #000000. Saved as `playerBg`. |
| List Background | Color control in the inspector. block.json default: #1a1a2e. Saved as `listBg`. |
| Active Episode BG | Color control in the inspector. block.json default: #2d2b55. Saved as `activeBg`. |
| Playlist Title | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Episode Title | Color control in the inspector. block.json default: #f0f0f0. Saved as `epTitleColor`. |
| Episode Meta | Color control in the inspector. block.json default: #718096. Saved as `epMetaColor`. |
| Active Accent | Color control in the inspector. block.json default: #6366f1. Saved as `activeColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Type | Select control; the chosen value is saved on the block. Options: YouTube; Vimeo; Direct URL (mp4). |
| Video ID | Text field in the inspector. |
| Video URL | Text field in the inspector. |
| Duration | Text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- A video player paired with a clickable episode/chapter list — perfect for course previews, tutorial series and video podcasts — that is the job of Video Playlist, not a generic content block.
- Use it when you need the editor control labeled “Orientation”, which exists on this block’s inspector.
- It matches pages about video, playlist, episodes.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Video Playlist block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Video Playlist”. It sits under Media. After insert, open Layout and set “Orientation”, “Episode List Position”, “Episode List Width (px)”, “Border Radius (px)”.
What makes Video Playlist different from other Blockenberg blocks?
A video player paired with a clickable episode/chapter list — perfect for course previews, tutorial series and video podcasts. Inspector labels on this block include “Orientation”, “Episode List Position”, “Episode List Width (px)”, “Border Radius (px)”.
Is the Video Playlist Gutenberg block free?
Yes. Video Playlist ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Video Playlist to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Layout, Visibility, Episodes).
Related media blocks
Background Video
A looping autoplay background video section with overlay and InnerBlocks content — distinct from video players or popups.
Sticky Video
Video player that minimises into a floating corner player when scrolled past, with close and restore controls.
Video Facade
Performance-optimized video thumbnail that loads the actual YouTube or Vimeo player only on click. Eliminates heavy iframes on page load, improving Core Web Vitals. Supports custom thumbnails, overlay text, and animated play buttons.
Video Grid
Responsive grid of video cards with play-in-lightbox functionality. Supports YouTube, Vimeo, and self-hosted videos. Custom thumbnails, titles, and duration badges.
Video Popup Button
A stylizable play button that opens a YouTube, Vimeo, or custom video in a modern full-screen popup modal.
Embed / iFrame
Responsive iframe embed for Calendly, Typeform, Google Forms, Airtable, YouTube, Vimeo, or any URL. Full aspect-ratio control and loading options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Video Playlist from the Gutenberg inserter.