HTML5 video with a working solution for iOS and React

Recently we ran into an issue here at Flower Press Creative Studio¬†where we were trying to load a background video in our React app. Using the HTML5 video tag everything worked fine, however the video would not autoplay on iOS devices. This turned out to be a two tiered issue. First off we need to add the “playsinline” property to the video tag. Additionally since we are using React we also need to make sure both “playsInline” and “autoPlay” are camelcase. Here is the final tag as implemented (import your mp4 video as Video here).

<video autoPlay loop muted playsInline> <source src={Video} type=’video/mp4′ /> Your browser does not support HTML5 video. </video>

Hope this saves you a few hours!