Instagram video embed in WKWebView… | Apple Developer Forums

Instagram video embed in WKWebView freezes on start on iOS18.5

Hi everyone!

Here's what I observed so far:

On device it's reproducible on iOS/iPadOS18.5, but works on iPadOS17.7.
On iPhone16 iOS 18.5 simulator that I was extensively using for development it was reproducible until I reset content and settings.
On iPhone 16 iOS18.4 simulator, which was also used a lot during development it still works always, so I tend to think it's 18.5 issue.
Setting config.websiteDataStore = .nonPersistent() doesn't help.
Cleaning WKWebsiteDataStore doesn't help.
It works fine using direct URL from the embedded code (see the code below).

Can someone provide some insight on how this could be fixed?

Here's the code:

import SwiftUI
import WebKit

@main
struct IGVideoApp: App {
    var body: some Scene {
        WindowGroup {
            WebView()
        }
    }
}

private struct WebView: UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView {
        let config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true

        return .init(frame: .zero, configuration: config)
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        let urlString = "https://www.instagram.com/reel/DKHFOGct3z7/?utm_source=ig_embed&amp;utm_campaign=loading"

        /// It works when loading from the data-instgrm-permalink URL directly
        // uiView.load(.init(url: .init(string: "\(urlString)")!))

        /// It doesn't work whith embedding
        /// Note: the code part for embedding (<blockquote>...</blockquote>) is taken from my
        /// Instagram post (https://www.instagram.com/p/DKHFOGct3z7/)
        /// and stripped down. The urlString was also extracted for demonstration of direct loading.
        let string = """
                <!doctype html>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <html>
                <head />
                <body style="background-color:black; margin:0px">
                    <blockquote class="instagram-media" 
                        data-instgrm-captioned
                        data-instgrm-version="14"
                        data-instgrm-permalink="\(urlString)">
                    </blockquote>
                    <script async src="https://www.instagram.com/embed.js"></script>            
                </body>
                </html>
            """
        uiView.loadHTMLString(string, baseURL: .init(string: "https://www.instagram.com"))
    }
}