Inline youtube video doesn't work in cordova application on iOS

Question

I develop a mobile application with cordova, and I really need to be able to play inline youtube video.

I tried to resolve it for a while:

• I set the attribute playsinline to 1 in the youtube iframe API

• I put <preference name="AllowInlineMediaPlayback" value="true"/> in my config.xml

• Then I set AllowsInlineMediaPlayback to true in the plist in Xcode

• I even try to put webkit-playsinline directly on the iframe

The results are weird. When I play my video the first time, it goes fullscreen. So I inspect my HTML via the remote developer tools to check if the attribute is well set. It is! I do as I would edit it, I leave it without modification, and the magic happen: my video plays inline!

Obviously, I can't ask my users to do this trick.

Someone have an idea to solve this out?

It's kind of an emergency issue...

Standley

This worked for me: #34003061 – Laevo

Answer 1

There are several conf files in the folder cordova, the one that worked in my case with IOS is /Staging/config.xml Try to add to this conf file: preference name = "AllowsInlineMediaPlayback" value = "true"

Bartko

Answer 2

More specifically you can add this in preference as @Patrice Tadrif mentioned in above answer in Cordova config.xml

<platform name="ios">
    <preference name="AllowsInlineMediaPlayback" value="true">
</platform>

Executioner

watch out for the closing tag – Surefooted

Answer 3

The name="AllowsInlineMediaPlayback" is not correct. The actual cordova preference name is "AllowInlineMediaPlayback" (note the missing 's' from 'Allows'). So the config.xml entry should look like this instead: atrice Tadrif mentioned in above answer in Cordova config.xml

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

Also, in the html <video> tag, don't forget to pass the playsinline attribute.

This is how I've found about this problem: https://medium.com/thecreative-cat/allowinlinemediaplayback-is-not-allowsinlinemediaplayback-1a9123fdf88c

Repentance

watch out for the closing tag – Surefooted

Answer 4

For me, it was just a case of using the correct preference name, you were missing the "s" from "Allows". So it should be:

<preference name="AllowsInlineMediaPlayback" value="true">     

Fibrillation