Video Integration

Modified on Mon, 9 Sep at 8:29 AM

The video element offers flexibility in embedding videos from platforms such as YouTube, Vimeo, Wistia, and more, enhancing the overall experience on your website or funnel. By incorporating video content, you can create a more dynamic and engaging atmosphere for your visitors.

General Configuration

When working with the video element, most modifications are made in the General Settings section, accessible from the left side of your editing panel.

General Settings

Element Name/Title

The top of this section displays the name of the element you’re editing. You can retain the default name or assign a new one for easier identification when designing your funnel.

Element Name

Spacing Adjustments

You have various options for adjusting the spacing around your video element.

Spacing Options

Padding Control: You can fine-tune the padding on all four sides (left, right, top, and bottom) using the available toggles. Margin Control: Adjust the margins at the top and bottom of your video content.

Background and Box Shadow

You can customize the background color by selecting from the palette or entering a custom color code to match your site’s branding.

Background Color

For added design depth, you can include a box shadow or inner shadow around your video element.

Box Shadow


Video Type and URL

In the Video Type dropdown, you can choose from multiple options, such as YouTube, Vimeo, Wistia, Custom Embed, or HTML 5.


Video Type

Depending on your selection, enter either the video URL or an embed code for your content.

Video URL


Auto-Play and Controls

You can enable auto-play for the video or allow users to control playback by toggling the on-screen controls.

Auto-Play

For added control, enable parental settings if necessary.

Controls

Video Width

Select the width of your video element, choosing between full, three-quarters, or half-width to fit the layout of your page.

Width

Advanced Customization

For further refinement, navigate to the Advanced Settings tab. Here, you can modify borders, adjust visibility, add custom classes, and copy CSS code for additional styling.

Border Options

You can apply borders to your video element, with customizable options appearing once a style is chosen.

Border Options

Border Style: Choose from solid, dotted, or dashed borders.

Style

Border Width: Set how thick or thin you want the border to be.

Width

Border Color: Choose from preset colors or enter a custom color code.

Color


Border Radius

You can also round the edges of your video element by selecting a border radius.

Radius

Further customize which edges are rounded by selecting all, top-only, or bottom-only edge adjustments.

Radius Edges

Visibility and Custom CSS

Manage the visibility of your video element, opting to display it only on desktop or mobile devices based on your requirements.

Visibility

To further tailor your element, enter a custom class or copy the CSS selector for later use.

Custom Class

For CSS, simply click the "Copy" icon to save the code.

CSS Selector



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article