diff --git a/packages/scratch-gui/src/components/cards/cards.jsx b/packages/scratch-gui/src/components/cards/cards.jsx
index 46b51ff3a9a..e289e658158 100644
--- a/packages/scratch-gui/src/components/cards/cards.jsx
+++ b/packages/scratch-gui/src/components/cards/cards.jsx
@@ -136,6 +136,7 @@ class VideoStep extends React.Component {
                     className={`wistia_embed wistia_async_${this.props.video}`}
                     id="video-div"
                     style={{height: `257px`, width: `466px`}}
+                    ref={this.props.videoRef}
                 >
                      
                 </div>
@@ -146,7 +147,8 @@ class VideoStep extends React.Component {
 
 VideoStep.propTypes = {
     expanded: PropTypes.bool.isRequired,
-    video: PropTypes.string.isRequired
+    video: PropTypes.string.isRequired,
+    videoRef: PropTypes.shape({current: PropTypes.instanceOf(Element)})
 };
 
 const ImageStep = ({title, image}) => (<Fragment>
@@ -354,18 +356,25 @@ const Cards = props => {
 
     if (activeDeckId === null) return;
 
-    const cardRef = useRef(null);
+    const videoRef = useRef(null);
 
     useEffect(() => {
-        // Only focus if there’s an actual tutorial step (image/video)
+        // Only focus in the presence of a video on the card
         const steps = content[activeDeckId]?.steps;
         const isTutorialStep = steps?.[step]?.video;
 
-        if (isTutorialStep && cardRef.current) {
-            // Defer focus to next animation frame for layout stability
-            requestAnimationFrame(() => {
-                cardRef.current.focus();
-            });
+        if (isTutorialStep) {
+            // Need the custom focus delay because of the conflict between this logic
+            // and refocusing the button that opened the library (tutorials in this case)
+            const FOCUS_DELAY = 500;
+
+            const focusVideo = () => {
+                const target = videoRef.current &&
+                    videoRef.current.querySelector('.w-big-play-button');
+                if (target) target.focus();
+            };
+            requestAnimationFrame(focusVideo);
+            setTimeout(focusVideo, FOCUS_DELAY);
         }
     }, [activeDeckId, step, content]);
 
@@ -400,8 +409,6 @@ const Cards = props => {
                 top: `${menuBarHeight}px`,
                 left: `${-cardHorizontalDragOffset}px`
             }}
-            ref={cardRef}
-            tabIndex={-1}
         >
             <Draggable
                 bounds="parent"
@@ -443,6 +450,7 @@ const Cards = props => {
                                                     dragging={dragging}
                                                     expanded={expanded}
                                                     video={translateVideo(steps[step].video, locale)}
+                                                    videoRef={videoRef}
                                                 />
                                             ) : (
                                                 <ImageStep
diff --git a/packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap b/packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap
index e0914d3c363..3c8fa96bd8d 100644
--- a/packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap
+++ b/packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap
@@ -3,7 +3,6 @@
 exports[`Cards component showVideos=false shows the title image/name instead of video step 1`] = `
 <div
   style="width: 1824px; height: 977px; top: 48px; left: -400px;"
-  tabindex="-1"
 >
   <div
     class="react-draggable"
@@ -52,7 +51,6 @@ exports[`Cards component showVideos=false shows the title image/name instead of
 exports[`Cards component showVideos=true shows the video step 1`] = `
 <div
   style="width: 1824px; height: 977px; top: 48px; left: -400px;"
-  tabindex="-1"
 >
   <div
     class="react-draggable"