fix autoplay background video on homepage for iOS

src/react-components/home-root.js

@@ -35,29 +35,20 @@ class HomeRoot extends Component {
 
   loadHomeVideo = () => {
     const videoEl = document.querySelector("#background-video");
-    function initVideo() {
-      videoEl.playbackRate = 0.75;
-      videoEl.play();
-      function toggleVideo() {
-        // Play the video if the window/tab is visible.
-        if (!("hasFocus" in document)) {
-          return;
-        }
-        if (document.hasFocus()) {
-          videoEl.play();
-        } else {
-          videoEl.pause();
-        }
+    videoEl.playbackRate = 0.75;
+    function toggleVideo() {
+      // Play the video if the window/tab is visible.
+      if (document.hasFocus()) {
+        videoEl.play();
+      } else {
+        videoEl.pause();
       }
+    }
+    if ("hasFocus" in document) {
       document.addEventListener("visibilitychange", toggleVideo);
       window.addEventListener("focus", toggleVideo);
       window.addEventListener("blur", toggleVideo);
     }
-    if (videoEl.readyState >= videoEl.HAVE_FUTURE_DATA) {
-      initVideo();
-    } else {
-      videoEl.addEventListener("canplay", initVideo);
-    }
   };
 
   showDialog = dialogType => {
@@ -208,7 +199,7 @@ class HomeRoot extends Component {
               </div>
             </div>
           </div>
-          <video playsInline muted loop className="background-video" id="background-video">
+          <video playsInline muted loop autoPlay className="background-video" id="background-video">
             <source src={homeVideoWebM} type="video/webm" />
             <source src={homeVideoMp4} type="video/mp4" />
           </video>