Webview: Background video not working, video auto-plays fullscreen on iOS

Questions about Thunkable
1

Hey all! First-time poster. Long-time Bubble dev, first time Thunkable dabbler.

I have a pretty complex webapp that runs great on Mobile Safari and Chrome. However, video behaves differently on Thunkable’s webview. Fistly, background video doesn’t play. Smaller on-screen videos that should autoplay inline, go fullscreen immediately.

I’m using the correct HTML on my webapp to make it autoplay on mobile devices:
<video autoplay playsinline muted loop>

Is Thunkable’s WebView updated? As of iOS 10 I believe that video was allowed to play inline on web.

Is there a trick to this?

Thanks for helping a newbie out!

2

Bump. Would really love help with this. Thanks guys!

3

Hi yes this is possible

import WebKit

enum MyURLError: Error {
    case invalidURL
    
    var description: String {
        switch self{
            case .invalidURL:
            return "Your url is invalid"
        }
    }
}

struct WebView: UIViewRepresentable{
    let url: URL?
    let onError: (MyURLError) -> Void
    
    func makeUIView(context: Context) -> WKWebView {
        var config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true
        return WKWebView(
            frame: .zero,
            configuration: config
        )
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard let myUrl = url else{
            return
        }
        let request = URLRequest(url: myUrl)
        uiView.load(request)
    }
}

Then in your navigation view you can call something like this:

WebView(url: URL(string: "https://lytudeyt2url.netlify.app/yttohtml5.html?url=\(id)"),
        onError: {err in
    print(err.description)
})
.frame(height: 500)

I’ll update my answer when I find a way to play it in the background. For now this just stops it from entering full screen

Brendan O.