You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm about to launch an app on the app stores that displays youtube videos and I'm using Capacitor.js to put my app in a web view. There's a specific problem with Capacitor and IOS that prevents most, but not all, youtube videos from playing. This seems to be because on IOS the Referrer header is stripped and this causes most videos not to play. But this is a problem with Capacitor and not much to do with Vidstack.
Basically you create your own youtube embed proxy. After some headaches setting this up because I had to change my X-Frame-Options header and add a frame-ancestors header, I managed to get this to work.
I can now play youtube videos via my proxy using a regular iframe, using the YT.Player and using vue3-youtube. To make it work I need to set the undocumented host param to the proxy's URL. This is documented in the article above.
Basically all of that now works, but I was initially using Vidstack and Vidstack doesn't work. I guess it's because I need to set the host param but it's not mentioned anywhere in the documentation so I wonder if it's even possible currently.
Would be great if it became exposed.. or maybe it's already possible through some undocumented method.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
I'm about to launch an app on the app stores that displays youtube videos and I'm using Capacitor.js to put my app in a web view. There's a specific problem with Capacitor and IOS that prevents most, but not all, youtube videos from playing. This seems to be because on IOS the Referrer header is stripped and this causes most videos not to play. But this is a problem with Capacitor and not much to do with Vidstack.
There is a solution which I found today by reading this priceless article:
https://medium.com/@kfir.e/working-around-youtube-iframes-on-webview-based-mobile-apps-c8543fb7bd47
Basically you create your own youtube embed proxy. After some headaches setting this up because I had to change my X-Frame-Options header and add a frame-ancestors header, I managed to get this to work.
I can now play youtube videos via my proxy using a regular iframe, using the YT.Player and using vue3-youtube. To make it work I need to set the undocumented host param to the proxy's URL. This is documented in the article above.
Basically all of that now works, but I was initially using Vidstack and Vidstack doesn't work. I guess it's because I need to set the host param but it's not mentioned anywhere in the documentation so I wonder if it's even possible currently.
Would be great if it became exposed.. or maybe it's already possible through some undocumented method.
If anyone knows.. please share :) Thanks!
Beta Was this translation helpful? Give feedback.
All reactions