Last active
March 3, 2025 09:35
-
-
Save marklchaves/25860698847efef76511d65ef4812bce to your computer and use it in GitHub Desktop.
Open a popup that dynamically loads a video based on the click open trigger using 1) data attribute or 2) a query parameter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php // Ignore this first line when copying to your child theme's functions.php file. | |
/** | |
* Send a video link to a popup using a URL in a data attribute. | |
*/ | |
function send_video_link_to_popup() | |
{ ?> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($) { | |
const popupID = 85, // Change to your popup IDs. | |
defVid = 'i9chqRlu1E4'; // We need to use the original video ID in the popup as a placeholder. | |
let vid = ''; | |
// Before the vid popup opens, check for the query param and then process | |
// the new vid link to inject into the popup's iframe. | |
$(document).on('pumBeforeOpen', `#pum-${popupID}`, function() { | |
const trigger = $.fn.popmake.last_open_trigger[0].firstChild, // Grab the popup trigger's link element. | |
link = trigger.dataset.video; // Grab the video attribute from the trigger. | |
// If the link has something, continue. | |
if (link && "" !== link) { | |
const url = new URL(link); //, // Grab the URL from the link. | |
const ytIframe = $(`#pum-${popupID} iframe`); | |
const src = ytIframe.prop('src'); | |
const tmpArr = link.split('/'); | |
vid = tmpArr[tmpArr.length - 1]; // The the last entry in the array should be the new vid ID. | |
//console.log(`[DEBUG] link: ${link} src: ${src} vid: ${vid}`); | |
ytIframe.prop('src', src.replace(defVid, vid)); // Swap vid IDs. | |
} // if | |
}); // listener | |
// Reset things since we're reusing the same popup for diffent videos. | |
$(document).on('pumBeforeClose', `#pum-${popupID}`, function() { | |
const ytIframe = $(`#pum-${popupID} iframe`), | |
src = ytIframe.prop('src'); | |
ytIframe.prop('src', src.replace(vid, defVid)); // Reset to the placeholder vid ID. | |
}); // listener | |
}); // jQuery | |
</script> | |
<?php } | |
add_action('wp_footer', 'send_video_link_to_popup', 500); // Load the script in the footer with a "late" priority. | |
/** | |
* You can add the PHP code snippet to your child theme's functions.php file | |
* or with third-party plugins such as My Custom Functions and Code Snippets. | |
* | |
* Learn more: | |
* - https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-js/ | |
* - https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-php/ | |
*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php // Ignore this first line when copying to your child theme's functions.php file. | |
/** | |
* Send a video link to a popup using a query parameter. | |
* | |
* Based on https://youtu.be/zml-xz78o2Q | |
*/ | |
function send_video_link_to_popup() { ?> | |
<script type="text/javascript"> | |
jQuery(document).ready(function ($) { | |
const popupID = 2114, // Change to your popup IDs. | |
defVid = '2E1Pw39TtFM'; // We need to use the original video ID in the popup as a placeholder. | |
let hasQueryParameter = false, | |
vid = ''; | |
// Before the vid popup opens, check for the query param and then process | |
// the new vid link to inject into the popup's iframe. | |
$(document).on('pumBeforeOpen', `#pum-${popupID}`, function () { | |
const trigger = $.fn.popmake.last_open_trigger[0].firstChild, // Grab the popup trigger's link element. | |
link = trigger.href; // Grab the href attribute from the trigger. | |
// If the link has something, continue. | |
if (link && "" !== link) { | |
const url = new URL(link), // Grab the URL from the link. | |
searchParams = new URLSearchParams(url.search); // Grab the query parameters. | |
if (!searchParams.get('usepopup')) return; // Bail if no popup query parameter. | |
hasQueryParameter = true; | |
const ytIframe = $(`#pum-${popupID} iframe`); | |
const src = ytIframe.prop('src'); | |
const tmpArr = link.split('/'); | |
vid = tmpArr[tmpArr.length - 2]; // The second to the last entry in the array should be the new vid ID. | |
console.log(`[DEBUG] link: ${link} src: ${src} vid: ${vid}`); | |
ytIframe.prop('src', src.replace(defVid, vid)); // Swap vid IDs. | |
} // if | |
}); // listener | |
// Reset things since we're reusing the same popup for diffent videos. | |
$(document).on('pumBeforeClose', `#pum-${popupID}`, function () { | |
if (!hasQueryParameter) return; // Bail if no popup query parameter. | |
const ytIframe = $(`#pum-${popupID} iframe`); | |
const src = ytIframe.prop('src'); | |
ytIframe.prop('src', src.replace(vid, defVid)); // Reset to the placeholder vid ID. | |
}); // listener | |
}); // jQuery | |
</script> | |
<?php } | |
add_action( 'wp_footer', 'send_video_link_to_popup', 500 ); // Load the script in the footer with a "late" priority. | |
/** | |
* You can add the PHP code snippet to your child theme's functions.php file | |
* or with third-party plugins such as My Custom Functions and Code Snippets. | |
* | |
* Learn more: | |
* - https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-js/ | |
* - https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-php/ | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Usage
In your post or page, add the
usepopup
query parameter to your video links.https://youtu.be/mMW3pE6KSv8/?usepopup=1