3

I'm writing an app which uses html5 video elements.
On iOS Safari when using playsinline to ensure the video is treated as an inline element for positioning etc, it works as expected except that the video appears on top of everything. z-index and positioning techniques don't seem to help with this issue. I cannot get anything to appear on top of the video under any circumstances.

On every browser except iOS Safari this seems to work absolutely fine.

For reference, this is an Angular app, and I'm currently testing in Mobile Safari on iOS 11.1.2

Also worth mentioning, the video src will resolve to a local blob url. eg. blob:file:///2afb998a-84e3-4819-8243-5da7d7da3cb6

<video
   id="video"
   [src]="src"
   autoplay="autoplay"
   muted="muted"
   webkit-playsinline
   playsinline>
</video>
Matthew Trout
  • 709
  • 5
  • 20

1 Answers1

0

I had the same problem. Removing overflow style from parent div of video tag solved it. See Video and z-index inside scaled element: some divs disappear for more information.

Alexander Ushakov
  • 5,139
  • 3
  • 27
  • 50