Select Page

How To Create A Popup Video In Divi Without A Plugin

by Jan 3, 2021Tutorials

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.

Divi is one of the best website builders for WordPress with hundreds of thousands of users and most engaging community. Divi Builder offers tons of modules which help build websites without coding skills. The Video module that comes with the Divi builder allows you to embed videos on your site, but what if you would like to display those videos in a popup window?

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.

p

Updated on August 24th 2021

The Divi 4.10+ introduced new performance settings where all modules CSS and JS is 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. To make the popup working on our image, we will also need to add a Code module to the page with a bit of JavaScript.

Demo Preview

1

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.

h

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);
2

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.

  1. Go to Divi → Theme Options → General
  2. Scroll to the very bottom and paste the CSS code to Custom CSS window
h

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;
    }
}
3

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.

  1. Add Image module to your page
  2. Go to Advanced tab
  3. In CSS ID & Classes section add video_popup class to CSS Class field
  1. Open YouTube video and copy its URL from the address bar
  2. Go to Content → Link tab
  3. Add Video URL to Image Link URL field and Save the module.
4

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.

  1. AddCodemodule to your page
  2. Copy the below JS code and paste it intoCodetext area
  3. ClickSavebutton
h

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 Ekstedt

Maciej is the co-founder and CEO of Divi Pixel. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company and for his clients. Maciej is fascinated by the phenomenon of megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.