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.

Demo Preview

1

Add JavaScript code

In this first step we will add JavaScript code to our website to make the popup triggering after the Image module is clicked. This code can be added to your child theme header.php file, or to Integration tab in Divi Theme Options. For this tutorial, I will use the Integration tab.

If you would like to use Divi child theme and don’t have one yet, please check this article.

  1. Go to Divi → Theme Options → Integration
  2. Make sure to enable Header Code
  3. Add JavaScript code to < head > section
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>
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 play icon on mouseover. This code can be added to the child theme style.css file, or to 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 last 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.

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.