# IOS video background not working

**URL:** <https://forum.ionicframework.com/t/ios-video-background-not-working/119543>\
**Category:** ionic-v3\
**Created:** [January 26, 2018, 4:29pm UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543 "2018-01-26T16:29:40Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![EnzoDLP](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/enzodlp/32/116227_2.png) [@EnzoDLP](https://forum.ionicframework.com/u/EnzoDLP)\
**Post date:** [January 26, 2018, 4:29pm UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/1 "2018-01-26T16:29:40Z")

</div>

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) …

---

<div class="post-metadata">

**Author:** ![Chungtheng](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chungtheng/32/116877_2.png) [@Chungtheng](https://forum.ionicframework.com/u/Chungtheng)\
**Post date:** [January 31, 2018, 4:23am UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/2 "2018-01-31T04:23:51Z")

</div>

Can you try this :

```auto
<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" />`

---

<div class="post-metadata">

**Author:** ![EnzoDLP](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/enzodlp/32/116227_2.png) [@EnzoDLP](https://forum.ionicframework.com/u/EnzoDLP)\
**Post date:** [January 31, 2018, 9:00am UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/3 "2018-01-31T09:00:44Z")

</div>

Without css ??

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

```auto
<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

```auto
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%);
} 

```

---

<div class="post-metadata">

**Author:** ![Chungtheng](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chungtheng/32/116877_2.png) [@Chungtheng](https://forum.ionicframework.com/u/Chungtheng)\
**Post date:** [January 31, 2018, 9:20am UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/4 "2018-01-31T09:20:21Z")

</div>

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

 ![Screenshot_20180131-161703](https://global.discourse-cdn.com/ionicframework/original/3X/e/4/e48ad9c63ad3521477424466cff08fe31b52ad32.jpg)

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.

---

<div class="post-metadata">

**Author:** ![Chungtheng](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chungtheng/32/116877_2.png) [@Chungtheng](https://forum.ionicframework.com/u/Chungtheng)\
**Post date:** [January 31, 2018, 9:24am UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/5 "2018-01-31T09:24:35Z")

</div>

This issue you can find on stackoverflow too: [here is the link](https://stackoverflow.com/questions/45568964/ionic-3-inline-video-opens-in-fullscreen-in-native-player-on-ios-10)

---

<div class="post-metadata">

**Author:** ![EnzoDLP](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/enzodlp/32/116227_2.png) [@EnzoDLP](https://forum.ionicframework.com/u/EnzoDLP)\
**Post date:** [January 31, 2018, 9:40am UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/6 "2018-01-31T09:40:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chungtheng](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chungtheng/32/116877_2.png) [@Chungtheng](https://forum.ionicframework.com/u/Chungtheng)\
**Post date:** [January 31, 2018, 9:55am UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/7 "2018-01-31T09:55:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![EnzoDLP](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/enzodlp/32/116227_2.png) [@EnzoDLP](https://forum.ionicframework.com/u/EnzoDLP)\
**Post date:** [January 31, 2018, 10:07am UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/8 "2018-01-31T10:07:49Z")

</div>

Okay ! Thank you anyway

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:53pm UTC](https://forum.ionicframework.com/t/ios-video-background-not-working/119543/9 "2021-07-19T21:53:08Z")

</div>