Opening YouTube or Vimeo videos in a popup window can give your website visitors a seamless and immersive viewing experience.
Using Divi's Button Module, you can easily create interactive buttons that trigger video popups, enhancing user engagement and keeping them on your page.
In this article, we will guide you through the process of setting up a button that opens a YouTube or Vimeo video in a popup window.
Go to WordPress Dashboard → Divi → Theme Option → Integration tab → Header
Add this JS and HTML code:
<script>
(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">Edit the Button module by clicking on the Gear icon
Go to the Content Tab → Link → Button Link URL
Add the YouTube or Vimeo video's URL
Go to Advanced Tab → CSS ID & Classes → CSS Class and add the video-popup CSS class
Go to Divi → Theme Option → General Tab → Performance
Disable the Dynamic JavaScript Libraries option
The result can be seen in the video below:
