I am having trouble getting the entire Instagram embed html to render inside this WKWebView. The following url is being use to query the api:
/instagram_oembed?url=https://www.instagram.com/p/B4x4RtagRoH/?igshid=rmiahm71silp&maxwidth=658
The maxWidth is described here in the Instagram docs: Instagram oEmbed Docs
Note: The frame of the WKWebView I am using has a width of 394 (translated to pixels would be 1182; which is why I'm using the APIs max possible width value of 658). Also, The WKWebView is added to a container UIView and constrained to its edges.
The call returns a json object with an html key that consists of the post. It starts with a <blockquote> and it wouldn't render properly so I wrapped it in a <HTML> and <HEAD> tag like so:
func embed(html: String, baseURL: URL? = nil) {
let htmlStart = "<HTML><HEAD><meta name=\"viewport\" content=\"width=658, shrink-to-fit=yes\"></HEAD><BODY>"
let htmlEnd = "</BODY></HTML>"
let htmlString = "\(htmlStart)\(html)\(htmlEnd)"
let script = """
var script = document.createElement('script');
script.src = 'https://platform.instagram.com/en_US/embeds.js';
document.head.appendChild(script);
"""
let userScript = WKUserScript(source: script, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
configuration.userContentController.addUserScript(userScript)
debugPrint("htmlString: \(htmlString)")
loadHTMLString(htmlString, baseURL: baseURL)
}
This is how it is currently rendering:
Why is the content of the html not resizing the height correctly?
What can I do to try to fit the entire html in the WKWebView?