diff --git a/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx b/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
index 04b38fdcf0..b78c505346 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
@@ -82,7 +82,7 @@ export function VideoPlayer({
   setActive: () => void
   onScreen: boolean
 }) {
-  const [hls] = useState(() => new Hls())
+  const [hls] = useState(() => new Hls({capLevelToPlayerSize: true}))
   const containerRef = useRef<HTMLDivElement>(null)
   const ref = useRef<HTMLVideoElement>(null)
   const [focused, setFocused] = useState(false)
@@ -94,6 +94,8 @@ export function VideoPlayer({
       Hls.isSupported()
     ) {
       hls.attachMedia(ref.current)
+      // initial value, later on it's managed by Controls
+      hls.autoLevelCapping = 0
 
       return () => {
         hls.detachMedia()
diff --git a/src/view/com/util/post-embeds/VideoWebControls.web.tsx b/src/view/com/util/post-embeds/VideoWebControls.web.tsx
index 336b080dfd..ab1455582e 100644
--- a/src/view/com/util/post-embeds/VideoWebControls.web.tsx
+++ b/src/view/com/util/post-embeds/VideoWebControls.web.tsx
@@ -111,9 +111,9 @@ export function Controls({
   useEffect(() => {
     if (focused) {
       // auto decide quality based on network conditions
-      hls.nextLevel = -1
+      hls.autoLevelCapping = -1
     } else {
-      hls.nextLevel = 0
+      hls.autoLevelCapping = 0
     }
   }, [hls, focused])