I'm attempting to use jQuery to open up a video in a modal but can't come up with a way to pass the oEmbed video url to the function which opens the modal.

In my theme the user adds the video to an ACF (Advanced Custom Fields) oEmbed field on the post and then I want the video to pop up in an overlay when they click on a link.

I'd like it to work something like:

function revealModal( event ) {
  $('body').prepend('<div class="modal visible"><div class="modal-content"></div><a class="close"></a></div>');
  $('.modal-content').html('<div class="embed-container"><iframe width="1280" height="720" src="" frameborder="0" allowfullscreen=""></div>');
  event.preventDefault();
}

... but don't know how to get that html or just the oEmbed video url (different to the link entered into the ACF field) from my link into the modal via js.

Can anyone suggest a sensible approach?

I'm attempting to use jQuery to open up a video in a modal but can't come up with a way to pass the oEmbed video url to the function which opens the modal.

In my theme the user adds the video to an ACF (Advanced Custom Fields) oEmbed field on the post and then I want the video to pop up in an overlay when they click on a link.

I'd like it to work something like:

function revealModal( event ) {
  $('body').prepend('<div class="modal visible"><div class="modal-content"></div><a class="close"></a></div>');
  $('.modal-content').html('<div class="embed-container"><iframe width="1280" height="720" src="https://www.youtube/embed/cZbInCooAfo?feature=oembed" frameborder="0" allowfullscreen=""></div>');
  event.preventDefault();
}

... but don't know how to get that html or just the oEmbed video url (different to the link entered into the ACF field) from my link into the modal via js.

Can anyone suggest a sensible approach?

• jquery
• javascript
• advanced-custom-fields
• oembed

• you will have to use wp_oembed_get codex.wordpress/Function_Reference/wp_oembed_get, to get the oembed result for the url, but how you connect it to ACF is a mystery. A general rant I always like to add when ACF is mentioned - just don't use it as it will keep you back anythime you are trying to do something a little complex – Mark Kaplun Commented Sep 23, 2016 at 17:18

1 Answer 1

Okay, I've got around this by simply hiding the div containing the oEmbed code and then using .clone() to replicate it into my modal when it pops.