Upload and Manage Videos In Elementor

If the homepage of a business does not include a short explainer video, it is considered as outdated and bland. It is very rare these days to come across a website that does not has a short video on it. The inclusion of short videos calls for the need for this article because this article discusses how to manage videos in Elementor. In this article, we have expanded the video widget and video background options.

Self-hosted and Dailymotion video support

In Elementor, you can embed not only videos from YouTube and Vimeo, but you can now also include self-hosted HTML5 and Dailymotion videos.

Benefits of self-hosted videos:

  • Privacy and control: With the GDPR and other privacy-related issues, this has become all the more important to have self-hosted videos. You can have control over the content of these videos.
  • Ownership: having self-hosted videos help you from relying on content that others make. With your video, you are 100% certain that there will be no issues of copyrights. Also, there is no risk of video getting deleted.
  • Personalization: with self-hosting, your video will not feature any logos or external links. This will help you include quality content, which looks more professional. Your videos can be very helpful in engaging the visitors on your site.
  • UX: self- hosted videos will ensure that your visitors will not be shown ads or suggested videos. They will not be distracted or redirected to your competitors (through suggested/recommended videos).

Start and End Time for Video Widget & Background

You can set a start and endpoint for the video widget on supported platforms. You can also get to pick the video background so that only the selected part of the video is played. With the help of this feature, you can loop the relevant part of the video very easily. You can display the selected content to your visitors in a loop.

Modest Branding

Say, if you have embedded a video from youtube, but you want to hide the youtube logo from it, you can select ‘Modest Branding’ to hide the logo from embedded Youtube video.

Add a Video Background to Elementor

In this section, we will guide you on how to add a video to Elementor:

Hit the Elementor editor, and navigate to the panel. From here, search ‘video’ and drag in the video widget.

  • Elementor > panel > search ‘video’ > drag ‘video widget’
  • Under Video > Source, choose either ‘YouTube’, ‘Dailymotion’, ‘Vimeo’ or self-hosted.
  • Next, add a link to the video. If the video is self-hosted, then you can either upload it y browsing the media library or by using an external URL.
  • If you want a specific portion of the video to play, you can choose a start time and an end time.
  • You can also add a thumbnail of your choice by adding an image overlay.

Improved Mobile Editing

Change Mobile and Tablet Breakpoints

Stcky videos.png

For a long time, people have wanted to have the liberty to have breakpoint values for videos on mobile and tablets. Good news!! The solution is here.

After adding the video, as shown in the above section, you can change the values of tablet and mobile breakpoints for Elementor. With the help of revolutionary breakpoints feature, you can customize your site to adjust on widescreen computers, laptops, tablets or small mobile screens.

To change the breakpoint values, navigate to:

Elementor Dashboard > Settings > Style and enter the new values for ‘Tablet Breakpoint’ and ‘Mobile Breakpoint.’

And voila!!!

You have done it in the nick of time.

WP CLI Integration

2.png

The Command-Line Interface for WordPress, WP-CLI, is an open-source project that provides a command-line interface for a variety of actions you might perform in the WordPress admin. Developers are pretty familiar with it.

So, with a WP-CLI, you can perform a long list of tasks from a random terminal. This way, you will not have to login to the admin terminal.

Elementor now comes with integrated WP-CLI. And this integration of WP-CLI allows you to perform the following tasks via the command line:

  • flush_css – Flush the Elementor Page Builder CSS Cache
  • sync-library – Sync Elementor Library
  • replace-URLs – Replace old URLs with new URLs in all Elementor pages
  • Activate or deactivate license – Activate or deactivate your Pro license
  • import-library – Import template files to the Library

More CLI commands will keep adding on for Elementor in the future.

Gutenberg Inclusion

3.png

In the coming months, Gutenberg will also be added to the core, which makes Elementor a full package.

With the launch of Gutenberg, Elementor will work even smoothly for all elementor users.

It is easy to switch between Gutenberg and Elementor with Version 2.1 because you will be using the ever familiar button ‘Edit with Elementor’ within Gutenberg.

Sticky Video by UAE

Imagine if you are scrolling a page, and the video content flings left or right, or simply remains unmovable.

It must be a frustrating sight.

But, not anymore. Because the amazing feature of UAE’s Sticky Video makes the video stick to the page while you scroll, this means that your video will float along the left or right side of the browser window. With sticky video feature, as the visitor scrolls to read the content, the video along with text content will stay in focus.

How to make a video sticky?

UAE’s feature has made this functionality elegant and simple. To make the video sticky, you can simply enable the Sticky Video to toggle under content (tab) > Sticky Video setting.

There are various alignments options for the video in a sticky video feature. Navigate to the Action Bar and settings to control every aspect of the sticky video. The key features are given below:

  • Video Size
  • A variety of alignment options for sticky video across the edges
  • Manage the video spacing and style.
  • Add a background for the video
  • Display the description for the video with the help of info bar
  • Responsive support
  • Drag sticky video across the window in the frontend
  • Close button customizations

Video Size

You can adjust the height and width of the video by specifying the width of the Video in px. The video display will apply as per the Aspect Ratio set for the video. You can control the aspect ratio for video from Content (tab) > Video.

e.g. – If you have set a ratio of 16:9, then the sticky video dimensions will apply as per the selected ratio.

Sticky Alignment

You can manage the alignment i-e the position of the sticky video across the edges of the window. The video can be positioned as:

  • Top Right
  • Top Left
  • Bottom Right
  • Bottom Left
  • Center Right
  • Center Left

Video Spacing

You can change the spacing from the edge to control the spacing around the video. The spacing will be applied according to the selected sticky alignment.

e.g., for Bottom Left alignment, the spacing will apply only from the bottom and the left edges of the video.

Background Size and Style

The best part about UAE sticky video is that you can add the background of your choice to the video. You can also select the size and color of the background.

background size and style.png

Info Bar

There is a small description given about each video- metadata kind of thing. With UAE sticky video option, you can add informative text under the sticky video. You can describe each sticky video, which will display the information about the currently playing video.

With the info bar, you can also control the color, background color, typography and padding of the video. The text field supports HTML content. You can also apply the custom style to the Info Bar content.

info bar.png

Manage Sticky Video on Responsive Devices

There is an option to Hide the Sticky Video on responsive devices. You can select different devices on which you want to hide the sticky video.

Drag Anywhere on Screen

You can drag the video screen anywhere using this feature. You can simply click on the video and drag it to place it anywhere within the viewport. The UAE sticky video supports the functionality to drag it anywhere, by default.

Note:  Mobile devices and the backend editor of the Elementor does not support the drag functionality.

Close Button

You can Enable/Disable the close button for the sticky video. There are also controls available to manage the style of the close button.

close button.png

Conclusion

With the help of UAE sticky video features, you can style and modify your sticky videos as per your preference. The plugin makes the whole procedure pretty easy. It is a very elegant solution to enrich the graphic content of your site. Keep creating amazing sticky videos on your website, and engage your visitors on your webpage even when they are scrolling your pages.

Leave a Comment

Your email address will not be published.