IOS video background not working

Ionic Framework ionic-v3
1

Hello,

I currently have on my login page a video in the background! It works perfectly on the WEB and on ANDROID but on IOS it does not work … the default image (poster) load the video does not turn but it is displayed in large screen (as in a player) …

2

Can you try this :

<video  poster="assets/images/videoloading.jpg" id="video" autoplay width="100%" 
height="100%" playsinline webkit-playsinline>
    <source  [src]="video_file.url" type="video/mp4">
  </video>

Add in config.xml

<preference name="AllowInlineMediaPlayback" value="true" />

3

Without css ??

It doesn’t work (only on IOS : show the video in fullscreen in a player) with this :

<video id="video" webkit-playsinline playsinline loop autoplay width="100%" height="100%" poster="assets/video/videobelle.jpg"><source src="assets/video/videobelle.mp4" type="video/mp4"></video>

and css

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
}
4

oh, I don’t why too, for me in iOS can play inline video normally

Screenshot_20180131-161703
Screenshot_20180131-161703.jpg1920×1080 639 KB

like in this photo I upload, I can add the countdown at the bottom and close ‘X’ at the top, and my video full screen because I put width=“100%” height=“100%”

  • but one thing for sure my video not play in iOS video player.
5

This issue you can find on stackoverflow too: here is the link

6

I have the video in the background connexion… The issue on stackoverflow doesn’t work for me…

7

For me I can use inline video as background video too. If this is not work for you, I don’t have anymore idea.

8

Okay ! Thank you anyway