How To Create A Popup Video In Divi Without A Plugin
Video makes websites more engaging and helps them rank better. In this tutorial, I will show you how to add a nice video popup to your Divi website without using any 3rd party plugins.
Fortunately, there is an easy way for doing that. Divi already has a magnific popup built-in which is used in Gallery module for opening images in a popup lightbox. In this tutorial, I will show you how to utilize this resource to open video popups after the image is clicked.
We will need to add a bit of the JavaScript code with a custom class which will be used for the Image module. We will also add a nice styling for our image, so the user experience will be smooth and engaging.
Updated on August 24th 2021
The Divi 4.10+ introduced new performance settings where all modules CSS and JS are served on demand. The Magnific Popup JS library is not loaded on all pages anymore, so we will need to enqueue it in our child theme’s functions.php file or add another image and enable the “Open in Lightbox” option so the script will be loaded. To make the popup work on our image, we will also need to add a Code module to the page with a bit of JavaScript.
Demo Preview
Enqueue Magnific Popup JS Library
Divi has a Magnific Popup JS library built in, however, it is not loaded if specific modules with this functionality are not used on a page. If we want to use this functionality on our Divi website, we need to add a code to enqueue this JS library, so it is loaded on all pages.
For this step, we will need a child theme. If you don’t have one yet, you can check this article on how to create a child theme, or use our free child theme generator.
To enqueue the Magnific Popup library, we need to add the following code to our child theme’s functions.php file.
PHP
function popup_enqueue_scripts(){
wp_enqueue_script( 'magnific-popup', ET_BUILDER_URI . '/feature/dynamic-assets/assets/js/magnific-popup.js', array( 'jquery' ), '1.3.0', true );
wp_enqueue_style('et_jquery_magnific_popup', ET_BUILDER_URI . "/feature/dynamic-assets/assets/css/magnific_popup.css", [], '1.3.0');
}
add_action('wp_enqueue_scripts', 'popup_enqueue_scripts', 20);
Note
Adding Magnific Popup script to the child theme will load it on all pages. If you need to display video popup on 1 page only, or specific pages, then you can add a separate Image module to that page and enable the “Open in Lightbox” option (Content/Link). That will load the Magnific Popup on this specific page, so you don’t need to enqueue it in the child theme and load globally.
- Add the Image module to the page or open the Image module that is already on the page
(not the Video Popup image) - Enable the “Open in Lightbox” option
Add CSS styling for the popup
In this step, we will add styling to our popup window. We will also add a nice animation to the Play button, which will display “Play” text by default, and changes to the play icon on mouseover. This code can be added to the child theme style.css file, or to the Custom CSS window available in the Divi Theme Options.
- Go to Divi → Theme Options → General
- Scroll to the very bottom and paste the CSS code to Custom CSS window
CSS
/* Custom Video Popup */
/* Popup Close Icon Tweak */
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
top: 0px !important;
position: fixed !important;
}
.mfp-iframe-holder .mfp-content {
max-width: 70%;
}
.mfp-iframe-scaler button.mfp-close {
top: -50px ;
}
.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close,
.mfp-wrap .mfp-close:active {
top: -50px !important;
}
.video_popup_lightbox .mfp-iframe-holder .mfp-close {
top: -50px;
}
.video_popup {
position: relative;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.video_popup a:before {
content: 'play';
cursor: pointer;
position: absolute;
top: calc(50% - 55px);
left: calc(50% - 54.5px);
z-index: 20;
background-color: #fff;
padding: 55px 27px;
border-radius: 50%;
font-size: 20px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0a2a3b;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.video_popup a:after {
content: 'E';
cursor: pointer;
font-family: 'ETmodules';
position: absolute;
top: calc(50% - 55px);
left: calc(50% - 47px);
z-index: 20;
background-color: #fff;
padding: 55px 27px;
border-radius: 50%;
font-size: 40px;
text-transform: uppercase;
color: #0a2a3b;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.video_popup.no_icon:before,
.video_popup.no_icon:after {
display: none!important;
}
.video_popup:not(.no_icon):hover {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
.video_popup:hover a:before {
opacity: 0;
padding: 65px 37px;
left: calc(50% - 64.5px);
top: calc(50% - 65px);
}
.video_popup:hover a:after {
opacity: 1;
padding: 65px 37px;
left: calc(50% - 64.5px);
top: calc(50% - 65px);
font-size: 56.5px;
}
@media all and (max-width: 980px) {
.video_popup a:before {
top: calc(50% - 32.5px);
left: calc(50% - 33px);
padding: 33px 17px;
font-size: 10px;
}
.video_popup a:after {
top: calc(50% - 32.5px);
left: calc(50% - 33px);
padding: 33px 17px;
font-size: 32px;
}
.video_popup:hover a:before {
opacity: 0;
padding: 40px 22px;
left: calc(50% - 43px);
top: calc(50% - 42.5px);
}
.video_popup:hover a:after {
opacity: 1;
padding: 40px 22px;
left: calc(50% - 43px);
top: calc(50% - 42.5px);
font-size: 42px;
}
}
Add Image module with custom CSS class and link
In this step we will add an Image module to our page with custom CSS Class and YouTube video link.
- Add Image module to your page
- Go to Advanced tab
- In CSS ID & Classes section add video_popup class to CSS Class field
- Open YouTube video and copy its URL from the address bar
- Go to Content → Link tab
- Add Video URL to Image Link URL field and Save the module.
Add Code module with custom JavaScript
In this last step we need to add Code module to the page where we want to trigger a popup video after the image with our custom class is clicked. This code module must be added to all page where we want to use lightbox functionality.
- AddCodemodule to your page
- Copy the below JS code and paste it intoCodetext area
- ClickSavebutton
JavaScript
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('a.video_popup, .video_popup a').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
})(jQuery);
</script>
This is it! I hope you enjoy reading this tutorial and it will help you display your videos in a more beautiful and engaging way. If you want more tutorial, make sure to sign up to our newsletter at the bottom of this site.
Maciej Ekstedt
Maciej, co-founder of Divi Pixel, is a passionate web designer and marketing expert who thrives on turning creative ideas into effective strategies. His fascination with the intricacies of megalopolises influences his work, where he meticulously crafts detailed solutions for his company.
Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with the Divi Pixel
We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!
Thank you! I just used this on a client’s website. 🙂
is there a way to make the circle play button smaller
Hey,
Yes. It’s possible. You need to tweak paddings for the :before and :after element.
Thank you, that worked nicely!
This is a nice-looking solution! I have some specific questions about how it impacts page-load time. We have clients with a lot of YouTube video embeds, and that YouTube code slows the page load. We are always looking for a video solution that doesn’t load until the user clicks. Does this sit in the background and delay the loading of any YouYube code until the user clicks?
I’ve got the same question as Mark… does this add all the YT code upon page-load, or when the user clicks?
No. This works as a link, so I believe that this video will be only loaded after the image is clicked. It’s the same as you would add YouTube link to your page. It doesn’t load the video on initial load. Hopefully, this helps 🙂
Hi. Is there a way to have this work on a BUTTON and not an image? Also, is there a way to do custom code so the video autoplays? Thank you so much. I am trying a site at my school.
Hi Bard,
Yes, this code will work with the button as well. Regarding autoplay, it won’t work I’m afraid. Sorry.
Dear Maciej Ekstedt
I have implemented this tutorial on multiple site but in the majority I have this issue after clicking on video : https://snipboard.io/SB4UKg.jpg
Do you have an idea how may I fix that ?
Best
It looks like your youtube link doesn’t work. Have you added it properly, as in instruction?
Dear Maciej Ekstedt,
yes I have followed step by step all your instructions but does not manage to get it worked
I have fixed the issue. It was related to the fact that I was pasting the embed link gernerated by youtube.
By typing these kind of links it works fine : https://www.youtube.com/watch?v=XXXXXX
Thanks
Great tut. Wish this worked with any link module. So sad.
Making it work with any link selector is quite simple, however, some CSS (like PLAY button) would have to be removed.
I got it to actually work after I wrote that. LOL. Thanks. How can I get it to work by calling a custom div though? Any chance I could use this to do that?
How can we do this to make it launch in page load?
Hi Deanna,
Unfortunately, this tutorial doesn’t cover that. To open popups on page load you would probably need some custom coding or 3rd party plugin with triggering settings.
Thanks for the tutorial. I am trying to get it to work on a column with modules in it and it works if I have a button but not without, any ideas?
Hi Theresa,
Yes, you can make it work without a button as well. You just need to add a link with a proper class. Please see the screenshot where I have used Text module with a link – https://imgur.com/wDs3ueE
Thanks, bro, it save me 2 hours and it worked perfectly.Thanks Again.
Hello !
Thank you so much this is just what I needed !
Just one more thing, is it possible to have the youtube link autoplay ? Adding autoplay in the link doesn’t work…
Thanks !
Hi David, no. I have tried and the autoplay function added to the link won’t work with this popup I’m afraid. I’m actually not even sure if this is still supported by YouTube.
Thanks!!
How can I remove the circle with the play icon?
Hi Patricia,
Yes, you can easily hide the circle button with the following CSS:
.video_popup a:before, .video_popup a:after {display:none;}
Hi! It looks like this doesn’t work after the newest update from Divi theme? Pop up no longer works, and it just acts like a URL link. Can you confirm? Thanks!
Hello Travis,
Yes, because magnific popup Divi js library is no longer enqueued on your site. We will update the tutorial shortly. For now, I would suggest disabling Dynamic CSS and Dynamic JS in Divi/Theme Options/Performance.
This worked great on my website!
Unfortunately since the latest Divi Theme update (08-18-2021) this solution doesn’t work anymore. The links just open regularly and not in a lightbox.
I would greatly appreciate if you could update this, since it worked so perfectly!
Hi Jakob,
The latest Divi has changed and if you don’t use any Divi module that loads magnific popup js library, it won’t load. We will update tutorial, but for now you should disable Dynamic CSS and Dynamic JS in Divi/Theme Options/Performance.
Yeah, it works !
But.. i have a quick question.. following this example, how can I remove the youtube controls and recommended videos at the end?
I’m afraid that this might be not possible when the youtube link is used, but maybe I’m wrong…
Pretty good, but a royal pain to change the circle size, and not very responsive.
Text and Icon for hover are way to small on mobile.
Will need to add some responsive code to this.
Hi!
I pasted the enqueue script and style function in the functions.php file (in a child theme), however there is apparently an error on this line :
wp_enqueue_style(‘et_jquery_magnific_popup’, ET_BUILDER_URI . “/feature/dynamic-assets/assets/css/magnific_popup.css”, [], ‘1.3.0’);
I can’t figure out what is wrong… Can you ?
However, thanks for this tutorial!
Hello,
I believe it’s a copy/paste issue with apostrophes and/or quotation marks. They don’t seem to be proper in the code you have posted here.
Hi Maciej,
Its Pretty good!!!!
Is it possible to insert two videos like video gallery module?
Thanks
I’m having an odd issue. I’m using it with Vimeo though I wouldn’t think that affects it.
When I click the image, Vimeo opens in a new browser tab (but doesn’t autoplay). When I close the new tab the video is playing in a lightbox on the page as it should. Any idea why it’s also opening the Vimeo page?
I’ve tried disabling Divi’s Dynamic CSS and JS but that didn’t change it.
Hello, I’m really not sure. We actually haven’t tested it with Vimeo videos. This tutorial was created for YouTube videos. Sorry I couldn’t help more this time :/
For me it works fine with vimeo. And also with Divi 4.15.1 even with Dynamic CSS and JS on.
Hello,
Thank you for this tutorial, it has been very helpful.
I have run into one problem where the video will pop-up in blank space at the bottom of the page instead of the center of my screen. This happens only on pages where I have videos in a tabs module that calls a divi library layout with the videos on it. If you have any idea why this occurs I would appreciate the help.
Hi Nikolas,
It’s really difficult to say anything without seeing a link. There must be something wrong with your custom implementation and maybe some more custom CSS is needed to make it working.
Hi!
Wonderful, that works very good so far.
On mobile I have a problem: The popup appears, but it´s only a black square with the X in the right corner. No video appears. On Desktop everything is fine.
Do you have an idea?
Thanks!
Paul
I have no idea Paul :/ As you can see from the demo on this page, it works fine on mobiles. I can’t see any issues.
Btw, a quick work-around instead of using the wp_enqueue_style code is to just place a 1px transparent image on the page via an image module and turn it’s open in lightbox option on, and that will force the Divi page to load the script for that page.
That’s smart 🙂 Thank you for leaving a comment, Michael.
Great tool, indeed – thank you! I tried it with the Blurb module (CSS class set to video_popup / and added the module link). While it is working with a link in the text field, it does not with the Blurb module itself. Is there a way to make it happen?
In the picture at the top of the page you show a video carousel, will this tutorial help me to create a carousel? If not, do you know of a video carousel plugin this will work with?
No, this tutorial will only show you how to open a popup video. Divi Pixel comes with a Carousel module that supports Divi Library items, so creating a carousel with videos would be possible. You can also check this tutorial on how to create a carousel without 3rd party plugins – https://www.divi-pixel.com/how-to-create-a-carousel-slider-in-divi-without-a-plugin/
I have difficulties with Divi’s code block, that strips away the script-tag and renders the javascript as normal text.
I have red and applied possible solutions given in this article without any luck: https://www.elegantthemes.com/blog/divi-resources/best-practices-for-using-external-javascript-snippets-with-divi
What could cause the script-tag from being striped away in the code block?
Big thanks for this article btw! Hopefully you have an answer to my issue too.