Using a small script, YouTube or Vimeo videos can be displayed inside a popup when a Button module is clicked.
Step 1. Add this script to Divi > Theme Options > Integrations > Head:
<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>
<link rel="stylesheet" href="/wp-content/themes/Divi/includes/builder/styles/magnific_popup.css" type="text/css" media="all">
Step 2: Add a Button module to the page
Add the YouTube or Vimeo video URL in the Button's Settings > Content Tab > Link > Button Link URL. For example https://www.youtube.com/watch?v=qDWBRAlLktg
Note: Popup won't work if the video's URL is being used in the Module Link option. If the Blurb module is used, the video's link should be added to the Title Link URL field.
Step 3. Set the custom CSS class for the Button Module
In the Advanced Tab > CSS ID & Classes > CSS Class, type in video-popup.
Step 4. Disable the Dynamic JavaScript Libraries option
In Divi > Theme Options > General Tab > Performance, disable the Dynamic JavaScript Libraries so that the custom JS code can properly work:
Final Result:
