Autoplay videos become fullscreen when navigating

[ibrahima]

Hi! I'm working on a new Hotwire Native app. I'm running into something weird, in that when when I try to sign into my app from the splash page, or sometimes when I'm just on the splash page, it opens up one of the <video> elements on the splash page full screen, without me tapping on the videos. It does seem like it's connected to tapping to navigate to a different page but I'm not 100% sure. There are several <video> tags on our splash page, and they have autoplay and loop and other attributes set.

I found that I can reproduce this with the hotwire-native-demo site. I just add this snippet of code to the top of app/views/dashboards/show.html.erb:

  <div class="margin-bs-l margin-be-l" style="text-align: center;">
    <video width="360" height="203" autoplay muted loop style="border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
      <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
      <source src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_2mb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>

When I point the demo iOS app at this version of the demo app, I get this experience when trying to navigate. It doesn't always happen, but I think it starts happening once the video has loaded (i.e. it's no longer a black square).

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-13.at.11.32.04.mp4

Is this a bug with Hotwire Native, or some strange webview default? It doesn't seem like good behavior anyway. I haven't tried with the Android demo app yet, but I expect since that's a completely different webview implementation it may not have the issue. Thanks!

[joemasilotti]

What happens if you disable full screen mode on the video via controlsList="nofullscreen"?

[ibrahima]

Ah, no luck with that unfortunately, but I found the answer on Stack Overflow! There's just a parameter that needs to be set on the webview to allow inline media playback. Submitted a PR:

#155

[joemasilotti]

Excellent! Thanks @ibrahima.

You can do this without a PR:

Hotwire.config.makeCustomWebView = { config in
    config.allowsInlineMediaPlayback = true

    let webView = WKWebView(frame: .zero, configuration: config)
    #if DEBUG
        if #available(iOS 16.4, *) {
            webView.isInspectable = true
        }
    #endif
    return webView
}

The inspectable stuff is so you can debug via Safari - feel free to leave that out if you don't need it.

[ibrahima]

Oh right thanks! I knew about that at some point but forgot. Apparently I used it to disable link previews in another app.