All Collections
Divi Documentation
Customizing Divi
Open Youtube or Vimeo videos in a popup using the Button module
Open Youtube or Vimeo videos in a popup using the Button module

Open YouTube or Vimeo videos in a popup window, when a button module is clicked

Andrei N avatar
Written by Andrei N
Updated over a week ago

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() {
$(', .video-popup a').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false

<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

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:

Did this answer your question?