allowsInlineMediaPlayback on iPhone

[githubowl]

Hello

In my app I am trying to play videos inline on each platform. I have set playsinline on the the video tag to one and the video plays inline on the web and on an iPad simulator, but not on an iPhone. The ios documentation says that this is default behavior and you have to set allowsInlineMediaPlayback on the WKWebView Configuration as the webview is created. This appears to be being done in the capacitor code and I have tried to do this in several places in XCode myself manually. All without success.

As an example Youtube play videos inline on their site, so could you tell me please how you do that in capacitor?

Thanks a lot
Best regards
Paul

[jcesarmobile]

Capacitor sets allowsInlineMediaPlayback to true. But your video tag also needs to include a playsinline attribute.

[githubowl]

Here is my video tag:

    <video width="500" height="281" controls>
        <source src="someurl" playsinline type="video/mp4" />
    </video>

iPhone 12. IOS 14.1. Simulator. It always plays fullscreen. Can it be anything to do with the routing? Being in a new page etc?

[jcesarmobile]

I think it should go on the video tag, not on the source tag

[githubowl]

Thanks a lot for the reply. I tried that and it worked in this case. Unfortunately for a youtube video using the youtube api it doesn't work. I think it's something in the youtube api, but i'm not 100% sure. I've copy/pasted their sample page from: https://developers.google.com/youtube/iframe_api_reference and adapted as follows:

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',

playsinline: 1,
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

I alos tried playsinline: '1'

But it still doesn't work, it always goes to fullscreen.

I've also opened an issue with the youtube api.