3

(sorry for the big images not sure how to resize in this markdown deriv)

I have some video in a webpage, using html5 video tag. On android, the video will remain inline on the page, allowing me to have other content around it such as subtitles in the HTML.

But on the iPhone when you hit play the video jumps out full-screen, destroying any other features.

Is there any way to prevent this take-over?

On Android, or normal web, we don't have this problem.

FYI tags using are (jade)

  video(width="100%" controls="controls" autoplay="true" id='videoPlayer' class='video-player')
    source(src="#{videoUrl}" type="video/mp4")

Before play

enter image description here

After click to play

enter image description here

dcsan
  • 11,333
  • 15
  • 77
  • 118

1 Answers1

8

While not originally possible in Safari on iOS using the native HTML <video> tag, Apple finally added support for this a while back by adding support for specifying a playsinline attribute on video elements.

e.g. <video … playsinline />

I appreciate this question is old, but someone had down voted it and it was unanswered.

Iain Collins
  • 6,774
  • 3
  • 43
  • 43
  • 1
    thanks for taking the time to answer! Moved on from that project awhile ago, but I will put this knowhow into my piggy bank for a rainy day. – dcsan Sep 15 '18 at 13:30
  • 1
    You welcome! I remember being dismayed by not being able to do this and missed they rolled it out until I started seeing this behaviour on pages more. This was the first hit on Google for my query and can't believe it didn't have an answer already. Hopefully answering now will commit it to memory and save me having to look it up again myself. 8) – Iain Collins Sep 16 '18 at 14:19