Dynamic iFrame Embed

iframe-embed.js

function embedHTMLContent(markup, container) {
    // generate a new HTML document, and an iFrame...
    var newDoc = document.implementation.createHTMLDocument('sample flickr content'),
        iFrame = document.createElement('iframe'),
        destDoc, srcNode, newNode;
    
    // Style the empty iframe, and insert it into the DOM...
    iFrame.width = '400px';
    iFrame.height = '200px';
    iFrame.style.border = 'none';
    container.appendChild(iFrame);
    
    // Put the embedded markup into the new document, and do some styling...
    newDoc.body.innerHTML = markup;
    newDoc.body.style.width = '400px';
    newDoc.body.style.height = '200px';
    newDoc.body.style.padding = '0';
    newDoc.body.style.margin = '0';
    
    // Now, put the new HTML document into the iframe...
    destDoc = iFrame.contentDocument;
    srcNode = newDoc.documentElement;
    newNode = destDoc.importNode(srcNode, true);
    destDoc.replaceChild(newNode, destDoc.documentElement);
    
    // VOILA!!!
}

var sampleFlickrMarkup = '<a data-flickr-embed="true" href="https://www.flickr.com/photos/bees/2362225867/" title="Bacon Lollys by ‮‭‬bees‬, on Flickr"><img src="https://farm4.staticflickr.com/3040/2362225867_4a87ab8baf_b.jpg" width="1024" height="768" alt="Bacon Lollys"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8></script>';
var embedContainer = document.getElementById('iframe-container');
embedHTMLContent(flickrMarkup, embedContainer);

This code creates a new HTML document, appends some embedded HTML content into it, and then inserts the new document into an iframe. This could be used to embed the "script" tag style embed codes that we receive from oembed.