Video Playlist

Creating a captivating video playlist on your website can engage your visitors and keep them on your page longer. Here's how you can easily add and manage video items in your playlist using the JupiterX WordPress theme.

Content Tab

Playlist

Playlist Name: Enter the desired name for your playlist in the provided 'Playlist Name' field.

Playlist Items: Here's how you can add or adjust your videos:

• Click on an existing video item to modify it, or press the '+ Add Item' button to insert a new one.
• Choose the Type of video source (YouTube, Vimeo, etc.) from the dropdown menu.
• In the Link field, paste the URL of the video you wish to add to your playlist.
• Select Get Video Data to automatically populate the title, duration, and thumbnail information for your video.
• Adjust the Title, if you want to display a different name for the video in your playlist.
• Manually input the Duration if it hasn't been fetched automatically.
• Click on the Thumbnail section to choose or upload a preferred thumbnail image.

Content Tabs: Set this to "Hide" if the tab interface should be hidden for this particular video item.

To manage your playlist:

• Use the '+ Add Item' button to insert more videos, repeating the steps above.
• To remove a video, click the 'X' next to the undesirable item.
• Reorder the videos by dragging and dropping using the six-dot icon on the left of each item.

Tabs

Here you can organize your videos into categories:

• For each category, fill out the Tab Name fields (e.g., Tab 1 Name, Tab 2 Name, and so on).
• Toggle Collapsible to "Hide" if you desire the tabs to open and close when clicked.

Image Overlay

Control how your videos look before playing:

• Switch the Image Overlay toggle to "Hide" to disable the overlay feature.
• If overlays are enabled, additional customization settings will be available.

Additional Options

Enhance the functionality of your video playlist with these easily configurable options. Here's how you can tailor your playlist to match your visitors' needs and improve their viewing experience.

• Layout: Choose the direction of layout.
• Autoplay: Control how videos start:
  • On Load: Set this to "Hide" if you prefer videos not to play automatically. Toggle to autoplay upon page load.
  • Next Up: Decide if the next video in the playlist should start immediately after the current one finishes by toggling this option accordingly.
• Indicate Watched: Toggle this option to indicate whether a video has been viewed.
• Video Count: Enable this to display the total video count prominently.
• Duration: Set to "Show" to include the duration for each video within the playlist.
• Thumbnails: By toggling to "Show," video thumbnails will be added to your playlist for visual appeal.
• Play Icon: Click on the existing icon to choose a different one from the library or upload your own design.
• Watched Icon: Indicate which videos have been seen. Similar to the Play Icon, select a unique icon to show viewers which videos they've already watched.
• Lazy Load: Opt for "Yes" to activate lazy loading, which loads videos only when needed, boosting page speed.

Style Tab

Layout

• Height: Move the slider or input an exact value to set your desired height, choosing from px, %, vh, and other units.

Top Bar

This is your playlist's header. Make it stand out or blend in:

• Playlist Name:
  • Background: Use the color picker for the background color.
  • Color: Assign a text color.
  • Typography: Adjust typography settings.
• Video Count:
  • Color: Designate a color for the number indicating how many videos are in your playlist.
  • Typography: Adjust typography settings.

Videos

Each video item can be styled individually, allowing you to get creative:

• Item:
  • Toggle between 'Normal' and 'Active' states for additional customization.
  • Background: Set the individual video item background color.
  • Color: Change the video title text color.
  • Typography: Specify the font style for video titles.
• Duration & Icon:
  • Duration Color and Typography adapt the style of the time display.
  • Icon Color, Shadow, and Size tweak the look and feel of video icons.
• Separator:
  • Define the line style, weight, and color that separates video items.

Section

If you have used "sections" to separate the playlist items, you can modify their styling here.

• Choose background and text colors, typography, border styles, and adjust border thickness and color to outline different sections distinctly.

Tabs

If you have enabled "Contents Tabs" in the playlist items settings, you can modify their styling here.