Inline Video Playback in Facebook Instant Articles on iPhones

3
votes

I'm using an iframe to embed a video in a Facebook Instant Article.

  • When I try to play the video on an Android phone it plays inline (i.e.) not full-screen.
  • However if I try to watch the instant article and try to play the video on an iPhone, it is taken over by the native iOS video player.
  • I need it to play in my custom video player which is why I use the iframe to embed it.

I've tried adding the playsinline and webkit-playsinline attributes to both the video tag and the iframe as well.

But they only work on Safari and not the instant article.

Is there some way to achieve inline Video playback in an Instant Article?

1
javascriptiosiphonefacebookfacebook-instant-articles

1 Answers

2
votes

I have been facing the same issue. Let me share my findings:

Custom HTML5 video player embedded in iframe do not play inline on iPhone for Facebook Instant Articles. This is because Facebook uses WebView to render Instant Articles and it is not configured to play inline. I have seen the same behavior in some Ionic project and basically unless Facebook changes some WebView settings there is nothing you can do (at least I have not found any workaround to date). It is not just you. See the Youtube sample from Facebook docs - it behaves the same.

Also it seems (at least on iOS 10+) that when you use a custom player in iframe the default iOS controls show up as soon as you exit fullscreen and this can cause double display of controls which is not ideal. Again I think it is because inline playback is not allowed. I also have seen issues with playing video ads on iPhone.

Bottom line is that custom HTML5 video player do not work well in Instant Articles on iPhone and it probably is best to use simple HTML5 video tag.

I hope they change that in the future.