-1

The Problem

I'm in the process of creating my web portfolio and have a video looping in the background. This works fine on my website when being used on desktop on all major browsers (Chrome, Firefox, Safari) and on my Android with the exception of Firefox for some reason... but I realized that iOS overrides the autoPlay attribute on video tags. This then leaves my website with a huge play button in the background that the user cant press since it's z-index is -1.


My Proposed Solution

To remedy this, I thought maybe I can detect the device and browser being used and then use conditional rendering to have a gif of the same video playing in the background instead. I know this doesn't seem like the most practical approach but at least I can have the major browsers on iOS devices displaying something rather than a play button that isn't accessible.


What I Need to Know

What code can I use to detect the device and browser being used, or will using the browser be enough and I won't have to worry about the device? Or maybe there is a more practical approach to tackle this problem? Maybe there is something wrong in my code? Anything will help!


Code

<video
    autoPlay
    playsInline
    loop
    muted
    style={{
      position: 'absolute',
      width: '100%',
      left: '50%',
      right: '50%',
      top: '50%',
      height: '100%',
      objectFit: 'cover',
      transform: 'translate(-50%, -50%)',
      zIndex: '-1'
    }}
    >
    <source src={s3BucketObject} type='video/mp4' />
  </video>
jsc31994
  • 29
  • 1
  • 8

1 Answers1

0

You could parse the user agent https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent, but it won't be fun and you'll probably forget some cases.

Best choice is using a library like https://www.npmjs.com/package/react-device-detect, the most popular for React.

alaric
  • 169
  • 6