Advanced Video

Creating a professional-looking video showcase is effortless with the Advanced Video Widget in JupiterX. Customize your video settings with precision using the options within the Content tab. Here's your guide to each feature.

View Live Demo

Content Tab

Video

Craft the perfect viewing experience by adjusting these basic video properties:

  • Video Type: Choose from platforms like YouTube or Vimeo to host your video content.
  • Link: Paste the URL link of the video you want to display from the chosen platform.
  • Start & End Time: Specify the exact seconds for when your video should start and stop.

Video Options

Fine-tune how your video behaves on the webpage:

  • Aspect Ratio: Pick the ratio that fits your layout, like the widescreen 16:9 or the standard 4:3.
  • Autoplay: Set to autoplay on load, with the note that it will be muted by default.
  • Mute: Decide if your video plays with sound or silently.
  • Loop: Looping allows the video to replay automatically at the end.
  • Player Controls: Show or hide playback controls to your audience.
  • Privacy Mode: For YouTube videos, enable Privacy Mode to limit data storage until play.
  • Lazy Load: Load your video only when it's in view to speed up initial page loading times.

Enhancements

  • Boost your video's visual appeal and functionality with these tweaks:
  • Hide YouTube UI: Remove YouTube's branding and related content for a cleaner look.
  • Auto-Hide Controls: Keep controls hidden unless interacted with for uninterrupted viewing.
  • Turn on Captions by Default: Make sure your content is accessible with captions from the start.
  • Sticky on Scroll: Keep your video visible, even as visitors scroll down the page.

Video Controls

Manage additional playback controls for enhanced user interaction:

  • Large Play Button: Introduce a prominent play button for a straightforward call to action.
  • Progress Bar, Current Time, Fullscreen: Display a progress bar, the video's current time, and a fullscreen option.
  • Rewind & Fast Forward: Offer viewers rewind and fast forward buttons for full control.

Video Cover

Design a captivating pre-play experience:

  • Image Overlay: Add a still image overlay that entices viewers to click play.
  • Image: Select the image that best introduces your video.
  • Play Icon & Lightbox: Include a play icon and opt to open the video in a lightbox for immersive viewing.

Device Mockup Frame

Frame your video in a digital device for a modern touch:

  • Frame this video in Device Mockup: Embed your video within a graphical representation of a device such as a laptop or desktop screen.
  • Device Type: Select the type of device that best suits your video's context and content.

Style Tab

Video

  • Player Style: Click the dropdown menu titled 'Player Style' and select from the available styles to alter the look of your video controls.
  • Skin Color: To change the control bar's color, click on the color square and either choose from the palette or enter a specific HEX code.
  • Controls Gradient: Enable this feature and then select two colors to create a gradient effect on your player controls.
  • CSS Filters: Customize the visual effects of your video by applying CSS filters. Enhance your video with options including blur, brightness, contrast, and more.
  • Border Type: Select a border type from options like none, solid, double, dotted, dashed, or grooved using the dropdown menu.
  • Border Width: Set the width of your border by inserting values in pixels for all sides of the video player.
  • Border Color: Click on the color square again to choose the border's color.
  • Border Radius: Soften or sharpen the edges of your video player by specifying the border radius in pixels for each corner.
  • Box Shadow: Add a shadow to create depth by customizing the color, blur radius, spread, and offset.

Icon

A play icon should be inviting and clearly visible:

  • Background Color: Set a color for the background of the play icon that stands out or complements your video.
  • Icon Color: Choose a distinct or harmonious color for the icon itself.
  • Container Spacing: Manage the space around the icon for a balanced look.
  • Icon Size: Adjust the size of the icon to ensure it's immediately noticeable or subtly integrated.
  • Border Radius: Set the roundness of your icon's corners to match the overall style of your player.
  • Shadow: Like the Box Shadow for the player, add depth to your play icon with a shadow effect.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles