I'm testing jquery-oembed-all as a solution for another question I have asked. The script is a small javascript file loaded in the page and provides the oembed
function for fetching media embed code.
I'm getting the oEmbed iframe back from a link easily like this:
<script>
$(function(){
tag = $(document.createElement('div')).oembed('https://vimeo.com/40179668');
$('.header').append(tag);
});
</script>
This works great and adds the oEmbed-generated iframe element to the .header
on the page. However I need the generated HTML as a string. Poking around in tag[0].outerHTML
and even tag[0].parent()[0].outerHTML
just revealed tag
to be the original empty div
created in the script, yet it clearly has all of the embed code because the embedded video loads on the page.
How do I get the HTML returned by the oembed
function as a text string? Do I need to traverse the DOM from the created div
tag to find it?
EDIT:
I added some alerts and it's all to do with timing. Since it's a network call the oEmbed function hasn't come back with an HTML block by the time I'm querying the outerHTML
.
EDIT 2: Looks like this can be solved with JS callbacks since the oEmbed call is asynchronous. When I get time to look for a solution I'll post it back here as an answer.