Recently I have been coding a full-page background video on a website.

Now I met a strange situation. In some Android phones (maybe related to the browser version), the video will full screen, with a max z-index and cover all the elements when playing.

For example, the https://virginhyperloop.com/

As you see above, in some Android phones, the video covered all the elements while iOS renders it correctly.

To solve this problem, I have an idea to replace the video with an image by JS on these unsupported Android phones.

However, I don't know how to detect whether the browser will play the video like this.

How can I detect it? Thank you.