title: How can I detect the device and browser being used so that autoPlay for video components work on iOS devices? [React.js]
body: <h2>The Problem</h2>
  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.
  <br><br><br>
  <h2>My Proposed Solution</h2>
  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.
  <br><br><br>
  <h2>What I Need to Know</h2>
  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!
  <br><br><br>
  <h2>Code</h2>
  <pre><code>&lt;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'
      }}
      &gt;
      &lt;source src={s3BucketObject} type='video/mp4' /&gt;
    &lt;/video&gt;
  </code></pre>