---
title: Video Popups Introduction
description: "## Overview The [Videos plugin extension to Popup Maker](https://wppopupmaker.com/extensions/videos/) allows video to display inside a popup. Add a video URL to either the classic or block popup editor. Configure the video player settings from the editor's *Popup Settings* box --…"
url: "https://wppopupmaker.com/docs/video-popups/introduction-6/"
updated: "2024-12-23"
category: Extensions / Video Popups
---

# Video Popups Introduction

## Overview

The [Videos plugin extension to Popup Maker](https://wppopupmaker.com/extensions/videos/) allows video to display inside a popup. Add a video URL to either the classic or block popup editor. Configure the video player settings from the editor's *Popup Settings* box -- *Videos* tab.

The video player controls can be customized with CSS from the plugin extension and [MediaElementjs.com](http://www.mediaelementjs.com/). The latter styles are used by WordPress to style video and audio controls for uploaded media.

## Add a Video URL to the Popup Editor

Once the *Videos* extension is installed and activated, create a new popup or edit an existing one. See the following article on how to add a new popup. 

**Related article:**  [Add Popup submenu / Add New Popup button](https://docs.wppopupmaker.com/article/486-popup-maker-admin-add-popup-submenu)

### Classic Popup Editor

Add a video URL to the *Visual* tab of the classic popup editor.  The video player can appear on the *Visual* tab, while the link URL will appear on the *Text*tab.

![file r65BRCmFeb](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5cc0d30b04286301e753b7e4/file-r65BRCmFeb.png)

*Figure 1 (above). A video URL added to the classic popup editor's Visual tab may display the video player.*

![file](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5cc0d3412c7d3a026fd40517/file-f9wjzwNBxH.png)

*Figure 2 (above).  The same video URL added to the classic editor's Text tab just appears as a URL string.**** ***

### Block Popup Editor

![file a6ERPpaigu](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5cc0d5d304286301e753b7fe/file-a6ERPpaigu.png)

When the block editor is enabled in Popup Maker, a video URL added in the classic editor is converted to a *Classic* block (green box above).  The block editor can be enabled in the WordPress admin at:

***Popup Maker >> Settings (submenu) >> General (tab) >> Enable Gutenberg Support (checkbox).***

**Related article: **[Settings submenu](https://wppopupmaker.com/docs/getting-started/popup-maker-admin-settings-submenu/)** ** // Refer to the 'General' option.

#### Add a New Video URL in the Block Editor

![file NSe5RD2ROz](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5cc0d8cf2c7d3a026fd40562/file-NSe5RD2ROz.png)

In the block editor, move the cursor below the popup name (or an existing block) to display a plus sign ( + ). Click the plus symbol to display a selection of the most used blocks. Choose either a *YouTube* or *Embed*block depending on the video source.

![file AdtyHc7ulA](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5cc0d86b04286301e753b820/file-AdtyHc7ulA.png)

In the example above, a *YouTube* block was selected. [1] The video URL from YouTube is added in the URL field. [2] Select the *Embed* button to complete the video embed process. 

![file fBLqTtLat5](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5cc0dab004286301e753b83b/file-fBLqTtLat5.png)

In the screenshot above, the embedded video is added to the *Visual* block editor.

![file n7K0fzQJp1](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5cc0db762c7d3a026fd40589/file-n7K0fzQJp1.png)

In the *Code* block editor shown above, [1] represents the first video URL saved in the *Classic* block, and [2] contains the HTML added by WordPress in the new YouTube block.

## Videos Settings in the *Popup Settings* box

![file XJGY0TCuTn](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c1d455c2c7d3a31944f64da/file-XJGY0TCuTn.png)

Once a video URL is added to the editor, scroll down the page and locate the *Popup Settings* box. Select the *Videos* option tab to display the plugin option settings. 

**See:** [*Video Popups Settings and Features*](https://wppopupmaker.com/docs/video-popups/video-popups-settings-and-features/) for available settings, and plugin defaults. 

## Review and Update The Popup Settings 

A popup created with the *Videos* extension is no different than any other popup. It requires: 

1) a popup name, 

2) at least one trigger, and 

3) a publication status of *Published*.

Refer to the following links for assistance to configure the remaining popup settings. *Each new popup is preset with many initial settings.* Review and update those settings to customize the behavior and style of your popup.

**Related article:**  [Create Your First Popup -- Summary Guide](https://wppopupmaker.com/docs/getting-started/create-your-first-popup-summary-guide/)

**Related article:**  [Popup Settings Box -- Initial Popup Settings](https://wppopupmaker.com/docs/the-popup-editor/popup-settings-box-initial-popup-settings/)

**Related article index:**  [The Popup Editor](https://docs.wppopupmaker.com/category/37-the-popup-editor)