In this video, I show you how to add a Video LightBox to any page on your site. We put the video together quickly, so there are a couple of mistakes, but correcting those mistakes might also be helpful to see.
The Class used for the Light Box is .OCLightBox
The ID used for the clickable object is .OCButton
The code is below the video.
Text for the Close Link Text Module
<p style="text-align: right;"><a href="#" onclick="jQuery(this).popupClose();">Close</a></p>
The CSS
Here is the CSS to add to your Custom CSS Section at the bottom of Divi -> Theme Options…
/* set up the lightbox area */ .page .et_pb_section.OCLightBox { position: fixed; top: 0; left: 0; display: none; box-sizing: border-box; min-height: 100vh; min-width: 100vw; z-index: 999999; padding-top: 5vh; padding: 5vh 10vw 10vh; } /* Make the Lightbox visible when it is open */ .page .et_pb_section.OCLightBox.popup-open, .page.popup-open { display: block; overflow: hidden; /* removes scrollbar */ }
The Code Module
This is the Code for the Code Module at the bottom of your page…
<script> jQuery(document).ready(function(){ jQuery(".page").on("click", "#OCButton", function(){ event.preventDefault(); jQuery( ".page" ).addClass( "popup-open" ).fadeIn(2000); jQuery( ".OCLightBox" ).addClass( "popup-open" ).fadeIn(400); }); jQuery.fn.popupClose = function() { event.preventDefault(); jQuery( ".page" ).removeClass( "popup-open" ) jQuery( ".OCLightBox" ).removeClass("popup-open"); return this; }; }); </script>