How to Use the Playlist Element

The Playlist Element allows you to create a video collection on your webpage, perfect for tutorials, product showcases, or entertainment content.

1. Adding the Playlist Element

Step 1: Insert the Playlist

1. Open your page editor.
2. Go to Add Elements → Scroll to Media → Select Playlist.
3. Drag and drop it onto your page.

2. Adding Videos to the Playlist

Step 2: Add Video Links

1. Click on a video thumbnail within the playlist.
2. In the sidebar menu, click the video icon.
3. Choose YouTube or Vimeo, then paste the video URL.
4. Repeat this process for all videos.

Step 3: Duplicate & Replace Videos

• Instead of adding videos manually, duplicate an existing video and replace the link.
• Click Duplicate, then update the video URL.

3. Customizing Playlist Settings

Playlist Layout Options

• Horizontal (Default) – Playlist appears on the right side.
• Vertical – Playlist is above the video player.
• Columns – Adjust how many thumbnails display at once.

Adjust Playlist Size

• Change width: Adjust the entire playlist size.
• Sidebar width: Resize the video list area.
• Thumbnail size: Control the preview image size.

4. Styling & Appearance

Typography & Colors

• Modify title & subtitle fonts, size, and colors.
• Change the active video color to highlight which video is playing.
• Add a background overlay to enhance contrast.

Video Controls & Customization

• Remove YouTube branding for a cleaner look.
• Enable/disable controls (play, pause, volume, fullscreen).
• Set autoplay or loop for continuous playback.
• Add a custom thumbnail instead of the default YouTube/Vimeo preview.

5. Managing Playlist Order

Reorder Videos

1. Click a video in the playlist.
2. Use the up/down arrows in the toolbar to move it.

Rename Videos & Add Descriptions

• Click the title to rename it (e.g., "Tutorial 1: Introduction").
• Add a short description (e.g., "Learn the basics with Morgan").

6. Mobile & Tablet Optimization

Tablet View Adjustments

• Reduce sidebar width for a compact layout.
• Increase text size for better readability.

Mobile View Adjustments

• Playlist appears stacked instead of side-by-side.
• Video player remains full-width, with the playlist below.

7. Why Use the Playlist Element?

Engages Users – Keeps visitors watching multiple videos.

Easy Navigation – Users can browse and select videos easily.

Fully Customizable – Adjust colors, fonts, sizes, and layout.

Responsive – Works across desktop, tablet, and mobile.

With these settings, the Playlist Element is an excellent way to present multiple videos in a sleek and user-friendly format.