← All widgetsWidget 313 · emcp_custom_313

Video Playlist

Elementor widget5 layouts12 content options19 style options2 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: video, playlist, youtube, vimeo, course, lessons.

Setup guide

  1. Open a page in Elementor, search the panel for Video Playlist and drag it into a container.
  2. Content › Videos: Videos, Layout, Playlist Title, Autoplay Next, Autoplay First Video, Show Numbers, Show Description Under Player, Remember Watched Videos and 4 more.
  3. Pick a Layout: Player left, list right, List left, player right, Player on top, list below, Player on top, thumbnail row, Grid of cards (player opens in place). Each one is shown below.
  4. Style tab sections: Style. Colours, typography and spacing set here are scoped to this widget instance.
  5. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Player left, list right

Layout = side

Course videos
Layout

List left, player right

Layout = side-left

Lessons
Layout

Player on top, list below

Layout = below

Lessons
Layout

Player on top, thumbnail row

Layout = thumbs

Lessons
Layout

Grid of cards (player opens in place)

Layout = cards

Lessons

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Videos

OptionTypeChoices / rangeDefaultNotes
Videos
videos		Repeater4 items
↳ Title
title		TextVideo
↳ Video URL (YouTube, Vimeo, MP4)
url		Text
↳ Thumbnail (auto for YouTube)
thumb		Image
↳ Duration
duration		Text
↳ Description
desc		Textarea
↳ Section Heading (starts a group)
section		Text
Layout
layout		DropdownPlayer left, list right, List left, player right, Player on top, list below, Player on top, thumbnail row, Grid of cards (player opens in place)side
Playlist Title
title		TextCourse videos
Autoplay Next
autoplay_next		Toggleon / offyes
Autoplay First Video
autoplay_first		Toggleon / off
Show Numbers
show_numbers		Toggleon / offyes
Show Description Under Player
show_desc		Toggleon / offyes
Remember Watched Videos
show_progress		Toggleon / offyes
Show Count / Total Duration
show_count		Toggleon / offyes
Player Ratio
ratio		Dropdown16:9, 4:3, 1:1, 9:1616/9
List Max Height (side layouts)
list_h		Slidermin 200, max 1000, px480
List Width (side layouts)
list_w		Slidermin 20, max 50, %36

Style tab

Style

OptionTypeChoices / rangeDefaultNotes
Accent
accent		Color#6a11cb
Background
bg		Color#ffffff
Radius
radius		Slidermin 0, max 40, px16
Border
border		Border
Shadow
shadow		Box shadow
Padding
pad		Dimensions
Player Radius
player_radius		Slidermin 0, max 40, px12
Playlist Title Typography
title_typo		Typography
Playlist Title Color
title_color		Color#101828
Item Typography
item_typo		Typography
Item Color
item_color		Color#101828
Item Hover Background
item_bg_h		Color#f9fafb
Active Item Background
item_bg_a		Color#f4ebff
Meta Color
meta_color		Color#98a2b3
Section Heading Color
section_color		Color#667085
Description Color
desc_color		Color#475467
Thumbnail Width
thumb_w		Slidermin 60, max 240, px112
Thumbnail Radius
thumb_radius		Slidermin 0, max 30, px8
Gap
gap		Slidermin 0, max 60, px20

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_313" and a settings object using the keys above. Run get-custom-widget with id 313 for the full JSON spec.