Missing Referrer Header When Embedding External Video Player in Capacitor App

Capacitor
1

I’m building a mobile app using Capacitor v7 from my Vuejs frontend and I’m embedding a video player from SproutVideo using an <iframe> inside a WebView.

SproutVideo uses the HTTP referrer header to verify the domain for playback (via their “Allowed Domains” feature). However, when loading the player inside the Capacitor app, the referrer is not sent, which causes the video to be blocked.

SproutVideo support confirmed that the referrer is required to authorize playback, and recommended reaching out to the Capacitor community to understand why the referrer is missing and if there’s a workaround.

While everything works fine on my web app and android app also made with capacitor it fails on IOS, where the referrer is not sent and video is blocked.
this is how i display the iframee:

<div v-html="chapter.sprout_url" />

and sprout_url is is an iframe

How can I make it work ?

2

Interesting that it works on Android but fails on iOS. The difference likely comes from how each platform’s WebView handles cross-origin iframe requests and headers. SproutVideo’s domain restriction policy might not align well with iOS’s stricter behavior.

3

Im also experiencing this behavior within an capacitor angular application.
Did you already solve it? I could not get the referrer work from the web view side…

4

This is affecting us with YouTube embeds as well. There is an open issue here - [Bug]: Ios Youtube embed player issue - Blocked a frame with origin "ionic://localhost" from accessing a frame with origin "https://www.youtube.com". Protocols must match. · Issue #8205 · ionic-team/capacitor · GitHub.

Also see Error embedding youtube video on ios 18 and above.