Make your WordPress site original and attractive using the Videor plugin. This simple plugin allows you to apply any shape for your video using a clipping mask to get an eye-catching element on your site. In addition, you can use the item to add a video background for the text or other blocks to help amplify your site’s message and engage visitors.
The Videor plugin provides different video sources, it can be added via YouTube, Vimeo link, or from the site media library. Along with this, you can manage different useful features for the video box. The Elementor widget comes with 40+ preset video masks that can be applied fast and easily. You can even use a custom shape in SVG format. The video clipping mask is an interesting solution for your video gallery or portfolio that does not require additional knowledge of coding or CSS and offers your visitors something new.
40+ stylish vector clipping masksYouTube, Vimeo, URL or WordPress Media LibraryCSS Filters to adjust video colorsIncludes Templates for ElementorCompletely cross-browser supportFlexible settings of video clipping maskUse any custom shape or create your ownCrafted for Elementor BuilderSuitable for all kind of Layouts and TemplatesPerfect for Popular Elementor Themes
To better understand the capabilities of the widget, we included 5 templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.
The Videor has straightforward settings. You can select content using various sources, manage its position, scale, and other options. The flexible style settings allow you to change the background colors, height and width, paddings and margins of the video. Adjust color, typography, shadow, alignment for the header and description. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.
Videor for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.
Features of the Videor plugin for Elementor
Perfect for Elementor 2.5 and higher
40+ Preset mask images
Adding custom SVG mask images
5 Videor templates included
Custom video width and height
YouTube, Vimeo, internal/external link as the source
Customizable fonts, colors, borders, backgrounds, gradient, etc.
Flexible Clipping Mask settings
Responsiveness settings
Works well with all WordPress themes built on Elementor
Totally Seo Friendly
Included pot file for quick translation on any language
Perfect for RTL direction
Fast and smooth installing
Tested and compatible up to WordPress 5+
Lightweight and Fast
All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
Easy to use and customize with modern User Interface
Installation Guide and detailed Users Manual
Six months Included Support for CodeCanyon buyers
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.
Installing
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:
Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )
STEP 1
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin
STEP 2
Go to Plugins > Add New
Add New Plugin to WordPress
STEP 3
Click Upload Plugin Button
Upload New Plugin to WordPress
STEP 5
Choose archive with Plugin and press Install Now Button
STEP 6
After Installing go back to the Plugins page and click Activate below plugin title
Activate Installed Plugin
Installation the plugin through FTP or build-in File manager
STEP 1
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
STEP 2
Upload archive with plugin to /wp-content/plugins
STEP 3
On next step Unzip the archive with the plugin
STEP 4
Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.
Activate Installed Plugin
After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.
Settings
The Videor widget provides different video sources, it can be added via YouTube, Vimeo link, or from the site media library. Along with this, you can manage different useful features for the video box. The Elementor widget comes with 40+ preset video masks that can be applied fast and easily. You can even use a custom shape in SVG format. The video clipping mask is an interesting solution for your video gallery or portfolio that does not require additional knowledge of coding or CSS and offers your visitors something new.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor to start using the Videor widget. You will find the widget at the end of the general section.
Widget icon
Drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
On the Content tab of the Videor widget, you can select a source and upload video, manage the clipping mask, and specify block caption.
Video settings
Video source – select the type of source to upload the video for a clipping mask. The available options: YouTube, Vimeo or Self Hosted.
Autoplay – the toggle to enable/disable the autoplay feature. The autoplay does not work then the mute option is disabled.
Play on mobile – the toggle to enable/disable the autoplay feature on mobile.
Mute – the toggle to enable/disable video sound.
Loop – the toggle to enable/disable video looping function.
Controls – the toggle to enable/disable the video control panel.
Modest Branding – this parameter lets you use a YouTube player that does not show a YouTube logo.
Privacy mode – the option allows you to embed YouTube videos without using cookies that track viewing behavior. This means no activity is collected to personalize the viewing experience. Instead, video recommendations are contextual and related to the current video.
Overlay – option to add an overlay layer for video. It useful when a video is used as a background or as part of a design, does not allow users to stop/start a video.
Lightbox – the toggle to enable/disable the lightbox feature for the video.
Custom aspect ratio – adjust video aspect ratios using the slider.
Video Position – select one of the available video positions for different devices to apply the mask to a certain part of the video.
Video scale – specify the video scale using the slider.
Clipping Mask settings
Mask – select one from the predefined mask shapes or select custom mask images in SVG format.
Mask Position – select one of the available mask positions or custom one specifying the horizontal and vertical offset.
Mask Repeat – select mask repeat mode for different devices: No-repeat, Repeat, Repeat-x, Repeat-y.
Mask Size – select the image size for different devices: Default, Cover, Contain, Custom.
Caption settings
The section allows you to add a title and description for the video block and place them in the desired position.
Header
Header – a field to enter the text for the header of the current block.
Header Position – select position to display the header: Top, Over, Bottom
HTML Tag – select one of the available tags from the list for the title text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
Header – the toggle to enable/disable the display of the header.
Subheader
Subheader – a field to enter the text for the subheader of the current block.
SubHeader Position – select position to display the subheader: Above Header, Under Header
Subheader – the toggle to enable/disable the display of the subheader.
Description
Description – a field to enter the text for the description of the current block.
Description Position – select position to display the description: Top, Over, Bottom
HTML Tag – select one of the available tags from the list for the description text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
Description – the toggle to enable/disable the display of the description.
Link
Link Position – select the position to apply the link: Image or Box.
URL – enter the image URL
Enable link – the toggle to enable/disable the link in the block.
Style tab
On the Videor widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.
Video
Margin – the setting allows managing the margin of the video in different units(px, em, %) for desktop, tablets, or phones.
Padding – the setting allows managing the padding of the video in different units(px, em, %) for desktop, tablets, or phones.
Width – specify the video width in different units(px, %, vw) for desktop, tablets or phones.
Height – specify the video height in different units(px, %, vh) for desktop, tablets or phones.
Background color – specify the background color and opacity of the current block using the color picker.
CSS Filters – the option allows you to add various CSS filters for the video as Blur, Brightness, Contrast, Saturation, Hue.
Clipping Mask
Margin – the setting allows managing the margin of the mask in different units(px, em, %) for desktop, tablets, or phones.
Padding – the setting allows managing the padding of the mask in different units(px, em, %) for desktop, tablets, or phones.
Rotation – specify the angle of shape rotation.
Header
Margin – the setting allows managing the margin of the header in different units(px, em, %) for desktop, tablets, or phones.
Padding – the setting allows managing the padding of the header in different units(px, em, %) for desktop, tablets, or phones.
Color– specify the font color and opacity for the text of the current block using the color picker.
Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
Alignment – manage header alignment (left, center, right) for desktop, tablet, or mobile.
Subheader
Margin – the setting allows managing the margin of the subheader in different units(px, em, %) for desktop, tablets, or phones.
Padding – the setting allows managing the padding of the subheader in different units(px, em, %) for desktop, tablets, or phones.
Color– specify the font color and opacity for the text of the current block using the color picker.
Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
Description
Margin – the setting allows managing the margin of the description in different units(px, em, %) for desktop, tablets, or phones.
Padding – the setting allows managing the padding of the description in different units(px, em, %) for desktop, tablets, or phones.
Color– specify the font color and opacity for the text of the current block using the color picker.
Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
Alignment – manage description alignment (left, center, right) for desktop, tablet, or mobile.
Advanced Tab
The settings in the advanced tab Videor widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Update page in the Elementor
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.