How to play Inline Video in Iphone Phonegap

Question

I'm creating an app using Phonegap, and it has to have inline videos. When I put the code for inline videos, it works great on iPads, but it doesn't work on iPhones. On an iPhone, it just automatically fullscreens it. I've tried putting in a preference pane in the config.xml file, but it still doesn't work. Here's the code:

config.xml

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

index.html

<video width="95%" style="display: block; margin: auto; margin-top: 10%;border: 1px inset #bbbbbb;" autoplay="" id="video" webkit-playsinline>
        <source src="used_files/lesson2_1.mp4" type="video/mp4" id="video">
        Your browser does not support the video tag.
</video>

Answer 1

I made a Hybrid app for IOS using Cordova and I got the same problem when playing video on iPhone. The video goes fullscreen with all the native control panel what I didn't want at all (breaking all my app design). On iPad it works fine, but not on iPhone. To solve the problem:

In the config.xml add

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

In your JavaScript (a) OR in your HTML (b) (it depends of your code)

a) in your JavaScript

var video = document.getElementById("myVideo");// Get your video
video.setAttribute('webkit-playsinline', 'webkit-playsinline');// Fix fullscreen problem on IOS 8 and 9
video.setAttribute('playsinline', 'playsinline');// Fix fullscreen problem on IOS 10

b) in your HTML

<video id="myVideo" webkit-playsinline playsinline>