# Inline video opens in fullscreen in native player on iOS 10

**URL:** <https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274>\
**Category:** ionic-v3\
**Created:** [August 8, 2017, 12:56pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274 "2017-08-08T12:56:17Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![royibernthal](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@royibernthal](https://forum.ionicframework.com/u/royibernthal)\
**Post date:** [August 8, 2017, 12:56pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/1 "2017-08-08T12:56:17Z")

</div>

I’m trying to play a video inline within an ionic 3 mobile app - I’d like to avoid launching the native video player.

I’m testing on iPhone 5s - iOS 10.

Here’s a function I created for loading videos according to everything I’ve read:

```
loadVideo(src: string, onComplete?: (src: string) => void): void {
    var video: HTMLVideoElement = document.createElement('video');

    video.setAttribute('playsinline', '');
    video.setAttribute('webkit-playsinline', '');
    video.setAttribute('src', src);

    video.autoplay = false;

    var onVideoLoaded = () => {
        video.removeEventListener('loadeddata', onVideoLoaded);
        
        if (onComplete != null) onComplete(src);
    };

    video.addEventListener('loadeddata', onVideoLoaded);
    
    video.load();
}

```

After the load is complete, I’m playing it via video.play().

Another version of this function is:

```
loadVideo(src: string, onComplete?: (src: string) => void): void {
	var video: HTMLVideoElement = document.createElement('video');

	video.setAttribute('playsinline', '');
	video.setAttribute('webkit-playsinline', '');

	video.autoplay = false;

	var srcElement: HTMLSourceElement = document.createElement('source');

	srcElement.setAttribute('src', src);
	srcElement.setAttribute('type', 'video/mp4');

	var onVideoLoaded = () => {
		video.removeEventListener('loadeddata', onVideoLoaded);

		if (onComplete != null) onComplete(src);
	};

	video.addEventListener('loadeddata', onVideoLoaded);

	video.appendChild(srcElement);
	video.load();
}

```

which uses the source element instead of the source attribute in the video element.

Both function versions end up having the same result - on iOS the video is played in fullscreen in the native player even though it’s supposed to play inline, and on Android it plays inline as expected.

---

<div class="post-metadata">

**Author:** ![royibernthal](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@royibernthal](https://forum.ionicframework.com/u/royibernthal)\
**Post date:** [August 8, 2017, 10:15pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/2 "2017-08-08T22:15:21Z")

</div>

I updated the info after more testing and isolated the issue further.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [August 8, 2017, 10:15pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/3 "2017-08-08T22:15:38Z")

</div>

Why are you doing all this DOM manipulation instead of just putting the `<video>` element in your template?

---

<div class="post-metadata">

**Author:** ![royibernthal](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@royibernthal](https://forum.ionicframework.com/u/royibernthal)\
**Post date:** [August 8, 2017, 10:25pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/4 "2017-08-08T22:25:11Z")

</div>

I don’t want to add it to the DOM, I’d like to load this video and then render it in the canvas via PIXI.

Regardless, it shouldn’t make a difference, should it?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [August 8, 2017, 10:29pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/5 "2017-08-08T22:29:34Z")

</div>

> [@royibernthal](#):
>
> I don’t want to add it to the DOM

Isn’t that what `document.createElement()` does?

> [@royibernthal](#):
>
> it shouldn’t make a difference, should it?

What I’m trying to get at is that I have had best results when I let Angular do as much of the DOM interaction as humanly possible.

---

<div class="post-metadata">

**Author:** ![royibernthal](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@royibernthal](https://forum.ionicframework.com/u/royibernthal)\
**Post date:** [August 8, 2017, 10:34pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/6 "2017-08-08T22:34:15Z")

</div>

> [@rapropos](#):
>
> Isn’t that what document.createElement() does?

document.createElement() creates an element, but it doesn’t append it to the DOM, correct me if I’m wrong or if my phrasing is incorrect.

> [@rapropos](#):
>
> What I’m trying to get at is that I have had best results when I let Angular do as much of the DOM interaction as humanly possible.

Makes sense, possibly Angular added some magic for inline videos on iOS under the hood, though I don’t think in my case this can be done (or at the very least it won’t be the ideal solution) - I need the videos loading and rendering to be very dynamic and not appended to the DOM.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [August 8, 2017, 10:43pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/7 "2017-08-08T22:43:51Z")

</div>

> [@royibernthal](#):
>
> document.createElement() creates an element, but it doesn’t append it to the DOM

I guess “DOM” has become overloaded to also mean a particular node tree, and in that sense I agree with you. I meant “DOM” in the larger sense of “all the direct interaction with HTML elements”. I can respect if you don’t want the element in the template, but I just figured it might make both lifecycle management and property binding easier if you could leverage typical Angular syntax.

---

<div class="post-metadata">

**Author:** ![royibernthal](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@royibernthal](https://forum.ionicframework.com/u/royibernthal)\
**Post date:** [August 9, 2017, 1:39pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/8 "2017-08-09T13:39:19Z")

</div>

> I guess “DOM” has become overloaded to also mean a particular node tree, and in that sense I agree with you. I meant “DOM” in the larger sense of “all the direct interaction with HTML elements”.

Yup 🙂

> [@rapropos](#):
>
> I can respect if you don’t want the element in the template, but I just figured it might make both lifecycle management and property binding easier if you could leverage typical Angular syntax.

Yes I understand your point, unfortunately this is a unique case.

Do you have any thoughts regarding the actual issue?

---

<div class="post-metadata">

**Author:** ![royibernthal](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@royibernthal](https://forum.ionicframework.com/u/royibernthal)\
**Post date:** [August 10, 2017, 8:07pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/9 "2017-08-10T20:07:16Z")

</div>

Someone in this forum must have dealt with inline videos on iOS?

---

<div class="post-metadata">

**Author:** ![royibernthal](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@royibernthal](https://forum.ionicframework.com/u/royibernthal)\
**Post date:** [August 16, 2017, 11:29pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/10 "2017-08-16T23:29:51Z")

</div>

@rapropos Just to be on the safe side to make sure that I’m not missing any obvious solution - I tried to write it in the HTML template as you suggested to see if maybe Angular takes care of this somehow - I got the same result.

```auto
<video playsinline webkit-playsinline autoplay>
	<source src="test.mp4" type="video/mp4">
</video>

```

How come playing a video inline on iOS is impossible for me? It’s supposed to be supported nowadays.

---

<div class="post-metadata">

**Author:** ![thielcole](https://avatars.discourse-cdn.com/v4/letter/t/9d8465/32.png) [@thielcole](https://forum.ionicframework.com/u/thielcole)\
**Post date:** [February 5, 2018, 5:35pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/11 "2018-02-05T17:35:50Z")

</div>

Old question but I feel like I should have a go at this. Not sure what version of iOS you are now currently testing on but I have succefully used inline video content.

```auto
<video #video1 muted="true" playsinline
     [attr.loop]="videoBuffer[0].looped"
     [@shift]="vidState1" preload="auto"
     [src]="videoBuffer[0].url" [poster]="videoBuffer[0].thumbnail?.url"></video>

```

I think there are some blockers to autoplay (not inline) in that the video has to be muted for it to autoplay inline.

[VideoJS Issue referencing this](https://github.com/videojs/video.js/issues/4296)

If you interested, I posted about a full solution I have for this with 3 rotating inline video elements that autoplay.

[Fast, Inline HTML5 Video](https://medium.com/@andrew.thielcole/html5-video-inline-in-ionic-3-1db2c5ad3023)

---

<div class="post-metadata">

**Author:** ![danielmm1997](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danielmm1997/32/85966_2.png) [@danielmm1997](https://forum.ionicframework.com/u/danielmm1997)\
**Post date:** [February 5, 2018, 6:05pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/12 "2018-02-05T18:05:25Z")

</div>

Do it simple and use [https://github.com/videogular/videogular2](https://github.com/videogular/videogular2) 😃

---

<div class="post-metadata">

**Author:** ![dimitri320](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dimitri320/32/116022_2.png) [@dimitri320](https://forum.ionicframework.com/u/dimitri320)\
**Post date:** [July 27, 2018, 3:14pm UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/13 "2018-07-27T15:14:06Z")

</div>

For community’s sake, here is the answer: [https://stackoverflow.com/questions/45568964/ionic-3-inline-video-opens-in-fullscreen-in-native-player-on-ios-10](https://stackoverflow.com/questions/45568964/ionic-3-inline-video-opens-in-fullscreen-in-native-player-on-ios-10)

---

<div class="post-metadata">

**Author:** ![codiqa100078139](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/codiqa100078139/32/115905_2.png) [@codiqa100078139](https://forum.ionicframework.com/u/codiqa100078139)\
**Post date:** [January 18, 2019, 9:39am UTC](https://forum.ionicframework.com/t/inline-video-opens-in-fullscreen-in-native-player-on-ios-10/101274/14 "2019-01-18T09:39:49Z")

</div>

Yep  
For ios add in config.xml