Marketing · Elementor
Video Popup widget for Elementor
A poster image that opens a video (self-hosted or hosted) in a popup, with autoplay-on-open available.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A poster image that opens a video (self-hosted or hosted) in a popup, with autoplay-on-open available.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Video Popup”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Source”, “Link code of the video”, “Link code of the video (Kng Video Popup Vimeo Url)”, “Choose Video File”. Style and Content tabs are listed on this page.
When to use it
- A hero “play demo” button.
- A tutorial teaser on a feature page.
- A promo clip without embedding a huge player.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Source | The chosen value is read in render() and applied on the front end. Options: YouTube; Vimeo; Self Hosted; External Hosted. |
| General — Link code of the video | Printed in the widget HTML from render(). |
| General — Link code of the video (Kng Video Popup Vimeo Url) | Printed in the widget HTML from render(). |
| General — Choose Video File | Media Library attachment(s); render() uses the URL/ID as the image source. |
| General — URL | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| General — Autoplay on Open | Start playback when the popup opens. Playback stops when the popup is closed. |
| General — Start Time | Specify a start time (in seconds). |
| General — Box Animation Direction | The chosen value is read in render() and applied on the front end. Options: Top; Right; Bottom; Left. |
| General — Set Maximum Width of popup box | Switcher inspector control (`kng_video_popup_box_max_width_switcher`). |
| General — Maximum Width (px) | Writes CSS `max-width` onto the widget’s front-end markup. (min 0). |
| General — Set Maximum Height of popup box | Switcher inspector control (`kng_video_popup_box_max_height_switcher`). |
| General — Maximum Height (px) | Writes CSS `max-height` onto the widget’s front-end markup. (min 0). |
| General — Disable Button | This is a useful feature if there is a need to set a custom element as the trigger instead of the default button. |
| General — CSS Class of trigger element (optional) | Apply a specific CSS class to your custom trigger element, such as a button, text, a menu item, etc. You can add the class in the Advanced tab of the new trigger element. Then, enter the same class in this field as well. This way, the Popup will open when you click on the trigger element. Please check the result on the live website, due to limitations of the Elementor preview mode. |
| Button — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Button — Button Horizontal Position | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Button — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (default 20, min 0). |
| Button — Transition duration for icon on hover (ms) | Writes CSS `transition` onto the widget’s front-end markup. (default 300, min 0). |
| Button — Scale button on hover | Switcher inspector control (`kng_video_popup_btn_scale_switcher`). |
| Button — Scale on hover | Writes CSS (king-addons-video-popup-button-wrap, transform) onto the widget’s front-end markup. (default 1.1, min 0). |
| Button — Button Effect | The chosen value is read in render() and applied on the front end. Options: None; Ripple. |
| Button — Ripple Color | Writes CSS (king-addons-video-popup-button-effect-ripple, border) onto the widget’s front-end markup. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Button (Normal) — Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-video-popup-button`. |
| Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-video-popup-button`. |
| Button (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button (Hover) — Icon Color | Writes CSS (king-addons-video-popup-button-wrap, color, fill) onto the widget’s front-end markup. |
| Button (Hover) — Background Color | Writes CSS (king-addons-video-popup-button, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-video-popup-button:hover`. |
| Button (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-video-popup-button:hover`. |
| Button (Hover) — Border Radius | Writes CSS (king-addons-video-popup-button, border-radius) onto the widget’s front-end markup. |
| Popup box — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Popup box — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Popup box — Box Shadow | Elementor box-shadow group for the selector. Selector: `.king-addons-video-popup-{{ID}}`. |
| Popup box — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `.king-addons-video-popup-{{ID}}`. |
| Popup box — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Popup box — Z-Index of Popup box (optional) | Note: The Popup box may not display over all elements in the Elementor preview mode here, due to limitations of the Elementor preview mode. However, the Popup box will display properly over all elements on the live website. Please check it there. |
| Overlay — Overlay Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Video Popup actually change on the page?
A poster image that opens a video (self-hosted or hosted) in a popup, with autoplay-on-open available. Inspector labels from this widget’s PHP include “Source”, “Link code of the video”, “Link code of the video (Kng Video Popup Vimeo Url)”, “Choose Video File”.
How do I add Video Popup in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Video Popup”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related marketing widgets
Popup & Lightbox Modal
An on-page popup or lightbox for a promo, form, or media embed. This is the widget; site-wide popups with conditions live in Popup Builder.
Share Buttons
Social share buttons for the current page, with networks and labels you choose.
Phone Call Button
A click-to-call button that opens the phone app on mobile and still looks like a CTA on desktop.
Price List & Menu
A menu or price list: item, description, price, optional image — for restaurants and services.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Countdown & Timer
A countdown to a date (or evergreen) for launches, sales, and events.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Video Popup after you activate it.