Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsGeneral
How to Open a YouTube or Vimeo video in a Popup Window using the Button Module
How to Open a YouTube or Vimeo video in a Popup Window using the Button Module

Learn how to open a Vimeo or YouTube video into a pop-up window through a Button module.

Updated over a week ago

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.

  1. Go to WordPress DashboardDivi → Theme Option → Integration tab → Header

  2. 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">

  3. Edit the Button module by clicking on the Gear icon

  4. Go to the Content Tab → Link → Button Link URL

  5. Add the YouTube or Vimeo video's URL

  6. Go to Advanced Tab → CSS ID & Classes → CSS Class and add the video-popup CSS class

  7. Go to Divi → Theme Option → General Tab → Performance

  8. Disable the Dynamic JavaScript Libraries option

The result can be seen in the video below:

Did this answer your question?