What is a modal popup? I explain in my own words to make it understand easily. The modal popup is a box. It shows up on the page with the background color overlay behind the box. With the overlay color, it makes the viewers focus on the content in the box. The viewers often can close the box by clicking the close button or the overlay area.
What do you need to follow this tutorial
Today I did small tasks for my client and one of the tasks was to create a video modal. The modal will be triggered by clicking on the YouTube play image. With the client’s request, we don’t want to spend time too much on this task since the client needs the site to be up and run on New Year. So I did the research and I found a fast way to implement the video modal within a few minutes.
What we need to follow in this tutorial are:
- Elementor plugin (get the Free version or get the Paid version) – Why I love Elementor?
- PremiumAddons plugin (get Free version)
These two plugins can be used with any theme that follows the WordPress Codex. Go ahead, install and activate these two plugins.
Create the video box in the Elementor template
In order to use the modal box widget from the Premiumaddons plugin with the video as the content, we need to create the Elementor template for the video first.
- At the dashboard, go to the “Templates” menu – This menu comes with the Elementor plugin
- Click on the “Saved Templates” menu
- Then click on the “Add New” button near the “Saved Templates” page title
- A modal popup for adding a new template will popup
- At the modal popup, select the template type as “section” and give the template name you like. Let’s say “video_modal_popup”
- Then click the “Create Template” button
- Now you are on the Elementor editor page
- Next, drag the video widget to the content area as in the screenshot below
- After you drop the video widget, you will see the sample video from Elementor shows up in the screen shot below.
I will use the default video link from Elementor as shown above. But you can change the source type and video link you want.
At the Elementor editor, if you move the mouse over the video in the content area, you will see a light blue box showing up. That light blue box is called a section. See the screenshot below.
I want to show the video at full width based on the maximum width of the modal box widget which is 1200px. So at the section attributes panel, I will add 1200 in the content width(Boxed). Then change “Default” to “No Gap” in the Column Gap setting.
Next, from the Layout tab, click on the “Advanced” tab, and we will set the margin and padding as 0. Then click on the “Update” button to save the changes.
Add the modal box to our video box
On the Elementor editor page, search for the modal box widget and drag the modal box widget to the content area you want. See the screenshot below.
Now you will see the “Premium Modal Box” button on the content area you drag the modal box widget to.
Next, we will change the “Premium Modal Box” button to a YouTube image button and set the trigger as a click event. Also, we will use our video in the Elementor template that we just created in the modal content area. To do so, just follow the settings below.
- At the Premium Modal Box attributes panel, set the settings below
- Content section>hide Header
- Content section> Choose the Elementor template from “Content to Show” then choose our Elementor template(video_modal_popup) from the Content dropdown box.
- Trigger Options> Choose an image and pick the YouTube image from the media uploader popup. (if you don’t have a YouTube image, you can use any image you already uploaded or upload a new image as you like)
- Change from the Content tab to the Style tab. We will change the modal box settings in the Style tab.
- At Style tab>Modal Box>set Width as 1200px
- At Style tab>Modal Box>set Border Radius as 0
- At Style tab>Modal Box>set Margin and Padding as 0
- Then click on the “update” button to save the changes
And that’s it. You finally create the video modal popup in a few minutes. With the Premium modal box widget, you can add any kind of content you want eg. text, images, videos, and more. The Premium modal box widget allows you to add the content through the text editor or Elementor template(you can add any content in the Element template. it is very helpful.).
I hope this post will help you and save you time. Next post, I will share with you how to create the video modal popup without plugins. Stay tuned!
