By using the Elementor Video Playlist Widget, you can create amazing video content for your site visitors. It is useful for anyone who wants to showcase unique video content on their website.
Controls
Playlist
Playlist Name – Name your playlist by entering the desired text
Playlist Items
Type – Select between YouTube, Vimeo, Self-Hosted, or SectionLink – Enter The URL of the video you want to useGet Video Data – When clicked, the title and video thumbnail will be retrieved from the sourceTitle – Enter your title to be displayed in the playlistDuration – Enter the duration of the videoContents Tab Toggle – If you wish to provide additional content below the playlist enable this by selecting Show / HideTab Content (if enabled) – Enter the tabs content in the text editor or use the dynamic options
Tip: Sections can be used to separate video categories or courses. You may use HTML to format the text or create links if needed.
Tabs
Tab One Name – Enter the desired text or use the dynamic functionsTab Two Name – Enter the desired text or use the dynamic functions
Image Overlay
Image Overlay Toggle – Select to Show / Hide the image overlay optionsChoose Image – (if enabled) Select a image from your media library or upload from your computerImage Size – Set the image size propertiesPlay Icon – Choose a custom play icon from the library or upload in SVG format
Additional Options
Layout – Choose left or right alignment of the playlistAutoplay – Chose the autoplay options by selecting to show / hide on the toggles below:On Load – Playlist will begin on page loadNext Up – Additional videos will play in succession Indicate Watched – Display a icon over the video thumbnail to indicate that a video has been watchedVideo Count – Show / Hide the number of videos in your playlistDuration – Show / Hide the time duration of your video in the playlistThumbnails – Show / Hide the video thumbnail in the playlistPlay Icon – Select the play icon to be displayed over the video thumbnailWatched Icon – (if enabled) Select the watched icon to be displayed over the video thumbnailLazy Load – Toggle to enable Lazy Loading of the videos
Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.
Style
Layout
Height – Use the slider to set the desired height of the playlist in PX, VH, or VW
Top Bar
Playlist Name
Background – Chose the desired color of the top bar background Color – Choose the color of the playlist name headingTypography – Set the font properties of the playlist name heading
Videos Amount
Color – Chose the color of the amount textTypography – Set the font properties of the amount text
Videos
Item
Background – Select the background color of the list itemColor – Select the color of the text of the list itemTypography – Set the font properties of the video title
Duration
Color – Select the color of the duration timeTypography – Set the font properties of the duration time
Icon
Color – Select the color of the play or watched iconShadow – Use the shadow options to display a shadow on your iconSize – Use the slider to increase or decrease the size of the iconSeparator – Select the border properties between the list items
Sections
Background – Choose the color of the section backgroundColor – Choose the color of the text in the section displayTypography – Set the font properties of the section textBorder Type – Choose the border properties of the section Width – Set the padding width of the section Color – Choose the color of the border
Tabs
Tabs
Border Width – Use the slider to control the slider widthBorder Color – Choose the color of the borderBackground Color – Choose the background color of the tab
Title
Color – Choose the color of the tab titleActive Color – Choose the active color of the tab titleTypography – Set the font properties of the tab title
Content
Color – Choose the color of the font in tab contentTypography – Set the font properties of the tab contentPadding – Adjust the padding of the tab content
Show More
Color – Choose the color of the 「Show More」 headingTypography – Set the font properties of the 「Show More」 heading
Advanced
There are no additional settings specific to this widget, but it is compatible with the standard Advanced Tab options.