diff --git a/services/web/frontend/js/features/autoplay-video/index.js b/services/web/frontend/js/features/autoplay-video/index.js
new file mode 100644
index 0000000000..5d0a6f04fa
--- /dev/null
+++ b/services/web/frontend/js/features/autoplay-video/index.js
@@ -0,0 +1,64 @@
+function setup(videoEl) {
+  const reducedMotionReduce = window.matchMedia(
+    '(prefers-reduced-motion: reduce)'
+  )
+
+  if (reducedMotionReduce.matches) {
+    // TODO: on firefox, if user enters this mode, video can throw error
+    // in console, if user seeks the control seek bar relatively fast
+    // AbortError: The fetching process for the media resource was aborted by the user agent at the user's request.
+    // this is only a problem in firefox (tested in macOS), chrome and safari is fine
+    videoEl.setAttribute('controls', '')
+
+    return
+  }
+
+  const DELAY_BEFORE_REPLAY = 15 * 1000
+  // 0.7 will enable the autoplay on the desktop main homepage video for users
+  // with the `new-design-registration` variant
+  const INTERSECTION_THRESHOLD = 0.7
+
+  let videoIsVisible
+  let canPlayListenerAdded
+
+  videoEl.addEventListener('ended', () => {
+    setTimeout(() => {
+      videoEl.currentTime = 0
+      if (videoIsVisible) {
+        videoEl.play()
+      }
+    }, DELAY_BEFORE_REPLAY)
+  })
+
+  const observer = new IntersectionObserver(
+    function onIntersecting(changes) {
+      for (const change of changes) {
+        if (change.isIntersecting) {
+          videoIsVisible = true
+          if (videoEl.readyState >= videoEl.HAVE_FUTURE_DATA) {
+            if (videoEl.paused && !videoEl.ended) {
+              videoEl.play()
+            }
+          } else {
+            if (!canPlayListenerAdded) {
+              canPlayListenerAdded = true
+              videoEl.addEventListener('canplay', function playWhenReady() {
+                videoEl.play()
+                videoEl.removeEventListener('canplay', playWhenReady)
+              })
+            }
+          }
+        } else {
+          videoIsVisible = false
+        }
+      }
+    },
+    {
+      threshold: INTERSECTION_THRESHOLD,
+    }
+  )
+
+  observer.observe(videoEl)
+}
+
+document.querySelectorAll('[data-ol-autoplay-video]').forEach(setup)
diff --git a/services/web/frontend/js/marketing.js b/services/web/frontend/js/marketing.js
index 69ede04916..c79a6aece6 100644
--- a/services/web/frontend/js/marketing.js
+++ b/services/web/frontend/js/marketing.js
@@ -11,6 +11,7 @@ import './features/event-tracking'
 import './features/fallback-image'
 import './features/multi-submit'
 import './features/cookie-banner'
+import './features/autoplay-video'
 
 $('[data-ol-lang-selector-tooltip]').tooltip({ trigger: 'hover' })
 $('[data-toggle="tooltip"]').tooltip()