How To Use Video Widget In Elementor?

Introduction

In this step-by-step guide, we’ll walk you through the process of using the Video Widget in Elementor, a popular page builder for WordPress. Elementor makes it easy to integrate videos into your website, whether they’re from YouTube, Vimeo, Dailymotion, or your own self-hosted source. Let’s get started!

Step 1: Search for the Video Widget

The first step in adding a video to your Elementor-designed webpage is to locate the Video Widget. To do this, open your Elementor editor, and in the left sidebar, search for the “Video” widget. Once found, simply drag and drop it into an empty section of your webpage.

Step 2: Select Your Video Source

After adding the Video Widget, it’s time to choose the source of your video. You have several options: YouTube, Vimeo, Dailymotion, or your own self-hosted video. Select the source that suits your needs.

Step 3: Enter Video Details

With your video source selected, you’ll need to enter the URL of the video you want to embed. Additionally, you can set the video’s start and end time, allowing you to showcase specific segments of the video. If you want the video to play automatically when the page loads, you can enable the auto-play option.

Step 4: Customize Player Controls

You can further customize your video’s playback experience by configuring player controls. If auto-play is enabled, you’ll see the “Play on Mobile” option, which allows iOS devices to auto-play the video. You can also choose to mute the video and enable looping.

When it comes to player controls, you have the option to show or hide elements such as Play/Pause, Volume, and more.

Step 5: Hide the YouTube Logo and Enable Lazy Load

If you want to enhance the user experience and ensure visitor privacy, Elementor provides additional features. You can hide the YouTube logo by sliding the “Modest Branding” slider to “YES.” Enabling this option ensures that YouTube won’t track visitor information until they actually watch the video.

For improved website performance, Elementor offers Lazy Load functionality. With this feature, video resources will only load when a user interacts with the Play button. You can choose to apply Lazy Load to the current video channel or any video on your webpage.

Step 6: Image Overlay

Elementor allows you to add an image overlay to your video. This feature is especially handy if you want to display a custom image or add branding to your video. You can show or hide the image overlay, set the image, and adjust its size. You can also enable a play icon overlay if desired.

Step 7: Style Your Video

Under the “Style” tab, you have the option to change the video’s aspect ratio, ensuring it fits seamlessly with your webpage’s design. If you still require more customization options, explore the left sidebar for a range of additional settings under the “Advanced” tab.

With Elementor’s Video Widget, you can seamlessly integrate video content into your website, enhancing your visitor’s experience and engagement. Whether you’re sharing instructional videos, product demos, or captivating content, Elementor’s Video Widget makes it easy to bring your vision to life.

How To Use Video Widget Embed: A Step-by-Step Guide

Step 1: Select the Source

The first step in embedding a video is to choose the source. For most users, this source is YouTube. Here, you have the option of hosting your video on external servers. By selecting the appropriate source, you are setting the foundation for your embedded video.

Step 2: External URL

If you decide to use a self-hosted video, you will need to enable the External URL toggle. This toggle becomes active when the video is not present in your Media Library. Once activated, a text box will appear, allowing you to enter the file’s URL. This step is crucial to ensure your self-hosted video is linked correctly.

Step 3: Set Start and End Time

In this step, you can specify the start and end time for your video. If you want the video to play from the beginning to the end, you can leave these fields blank. However, if you only want a specific portion of the video to be played, enter the desired start and end times accordingly.

YouTube Settings

If you’re embedding a YouTube video, you’ll find additional settings to customize your video’s behavior:

• Autoplay: Slide this toggle to ‘YES’ if you want the video to start playing automatically as soon as the page loads. It’s a great way to capture your audience’s attention instantly.
• Play on Mobile: This option only appears if Autoplay is set to ‘YES’. Enabling it allows iOS users to experience autoplay as well.
• Mute: Slide this toggle to ‘YES’ if you want the video to play without sound. This can be useful in situations where you want to provide visual content without audio.
• Loop: Enable this setting by sliding to ‘YES’ if you want the video to replay continuously, creating a seamless viewing experience.
• Player Controls: This setting allows you to show or hide the video player controls, giving you more control over the user experience.
• Modest Branding: When Player Controls is set to ‘YES’, you can further enhance the viewing experience by hiding the YouTube logo. Slide the Modest Branding slider to ‘YES’ for this feature.
• Privacy Mode: Decide whether you want to enable or disable Privacy Mode. When turned on, YouTube won’t store information about visitors on your website unless they actively play the video.
• Image Overlay: Choose to show or hide an image overlay to make your video presentation more visually appealing.

If Image Overlay is set to ‘Yes’, you can adjust the following options:

• Image: Select the image you want to overlay on the video.
• Lazy Load: Defer the loading of video resources until the user clicks the Play button, improving page load times and user experience.
• Image Size: Set the size of the overlay image to fit your design.
• Play Icon: Slide this toggle to ‘YES’ to display a play icon on the overlay image.
• Lightbox: Enable the Lightbox feature by sliding it to ‘ON’. This allows users to view the video in a pop-up window for a more immersive experience.

How To Use Woocommerce In Elementor?

The Products menu is where you populate your shop with things others can purchase.

1. Add a Product

Create items to sell via Products > Add New. Clicking on it takes you to this familiar screen. Creating products in WooCommerce basically happens through the classic WordPress editor plus some additional options.

2. Configure Product Data

You find the product data below the main editor window. Filling in this information is mandatory for your shop to work.

3. Build a Product Page using Elementor

You can also customize the look and feel of your product pages with Elementor. Yes, your favorite page builder integrates with WooCommerce. To create a new product template, simply go to Templates > Add New. Then pick Single Product as the type you want to create.

4. Configure the Add-to-Cart Button

Since the Buy button is one of the most central elements of every online shop, it deserves special mention here. Elementor offers two options for Add-to-Cart buttons: regular and custom.

5. Finalize the Design

Finally, when you are done and ready to hit the Publish button, remember to set the conditions under which the new design should show up. This can be set for all products, for a certain category and/or child category, a tag, or only for products by a certain author. More complex conditions are also possible.