Background video in IOS plays in-player or not at all

Ionic Framework ionic-v3
1

I’m trying to have a video background on a page

I’m using video tag with source and with some styling it’s working fine on web and Android, but on IOS it’s not showing unless I add autoplay attribute which is openning video player on IOS devices instead of showing the video in the background :sweat_smile:
code sample:

<video playsinline webkit-playsinline autoplay loop muted  id="bg-video">
     <source src="assets/backvideo.mp4" type="video/mp4">
</video>

I tried adding <preference name="AllowInlineMediaPlayback" value="true" /> to confing.xml but that didn’t solve the issue
Does anyone have this issue? How can I overcome it?

2

I used to have the same problem unitl i found this webcomponent: https://www.npmjs.com/package/gl-ionic-background-video and it solved for me.

This maybe its not the solution but its a good alternative

1 Like