diff --git a/ui/component/autoplayCountdown/index.js b/ui/component/autoplayCountdown/index.js
index 2c1dc071d..e7d767071 100644
--- a/ui/component/autoplayCountdown/index.js
+++ b/ui/component/autoplayCountdown/index.js
@@ -6,6 +6,7 @@ import { makeSelectIsPlayerFloating, makeSelectNextUnplayedRecommended } from 'r
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
 import AutoplayCountdown from './view';
+import { selectModal } from 'redux/selectors/app';
 
 /*
 AutoplayCountdown does not fetch it's own next content to play, it relies on <RecommendedContent> being rendered. This is dumb but I'm just the guy who noticed
@@ -17,6 +18,7 @@ const select = (state, props) => {
     nextRecommendedClaim: makeSelectClaimForUri(nextRecommendedUri)(state),
     isFloating: makeSelectIsPlayerFloating(props.location)(state),
     autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
+    modal: selectModal(state),
   };
 };
 
diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
index 6c7825b83..92b46a5b4 100644
--- a/ui/component/autoplayCountdown/view.jsx
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -13,6 +13,7 @@ type Props = {
   isFloating: boolean,
   doSetPlayingUri: (string | null) => void,
   doPlayUri: string => void,
+  modal: { id: string, modalProps: {} },
 };
 
 function AutoplayCountdown(props: Props) {
@@ -23,6 +24,7 @@ function AutoplayCountdown(props: Props) {
     doPlayUri,
     isFloating,
     history: { push },
+    modal,
   } = props;
   const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
 
@@ -32,6 +34,8 @@ function AutoplayCountdown(props: Props) {
   const [timer, setTimer] = React.useState(countdownTime);
   const [timerCanceled, setTimerCanceled] = React.useState(false);
   const [timerPaused, setTimerPaused] = React.useState(false);
+  const anyModalPresent = modal !== undefined && modal !== null;
+  const isTimerPaused = timerPaused || anyModalPresent;
 
   let navigateUrl;
   if (nextTitle) {
@@ -82,7 +86,7 @@ function AutoplayCountdown(props: Props) {
   React.useEffect(() => {
     let interval;
     if (!timerCanceled && nextRecommendedUri) {
-      if (timerPaused) {
+      if (isTimerPaused) {
         clearInterval(interval);
         setTimer(countdownTime);
       } else {
@@ -99,7 +103,7 @@ function AutoplayCountdown(props: Props) {
     return () => {
       clearInterval(interval);
     };
-  }, [timer, doNavigate, navigateUrl, push, timerCanceled, timerPaused, nextRecommendedUri]);
+  }, [timer, doNavigate, navigateUrl, push, timerCanceled, isTimerPaused, nextRecommendedUri]);
 
   if (timerCanceled || !nextRecommendedUri) {
     return null;
@@ -119,12 +123,12 @@ function AutoplayCountdown(props: Props) {
           <div className={'autoplay-countdown__button autoplay-countdown__button--' + (timer % 5)}>
             <Button onClick={doNavigate} iconSize={30} title={__('Play')} className="button--icon button--play" />
           </div>
-          {timerPaused && (
+          {isTimerPaused && (
             <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
               {__('Autoplay timer paused.')}{' '}
             </div>
           )}
-          {!timerPaused && (
+          {!isTimerPaused && (
             <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
               {__('Playing in %seconds_left% seconds...', { seconds_left: timer })}{' '}
               <Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />