diff --git a/src/App.tsx b/src/App.tsx
index 76f9198e97b8..a3a9f7a3f3b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ import ScrollOffsetContextProvider from './components/ScrollOffsetContextProvide
 import ThemeIllustrationsProvider from './components/ThemeIllustrationsProvider';
 import ThemeProvider from './components/ThemeProvider';
 import ThemeStylesProvider from './components/ThemeStylesProvider';
+import {FullScreenContextProvider} from './components/VideoPlayerContexts/FullScreenContext';
 import {PlaybackContextProvider} from './components/VideoPlayerContexts/PlaybackContext';
 import {VideoPopoverMenuContextProvider} from './components/VideoPlayerContexts/VideoPopoverMenuContext';
 import {VolumeContextProvider} from './components/VideoPlayerContexts/VolumeContext';
@@ -78,6 +79,7 @@ function App({url}: AppProps) {
                         ActiveElementRoleProvider,
                         ActiveWorkspaceContextProvider,
                         PlaybackContextProvider,
+                        FullScreenContextProvider,
                         VolumeContextProvider,
                         VideoPopoverMenuContextProvider,
                     ]}
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
index 4988110538fe..ec2687d634bb 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
@@ -82,6 +82,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}: CarouselItemPr
                     isHovered={isModalHovered}
                     isFocused={isFocused}
                     duration={item.duration}
+                    isUsedInCarousel
                 />
             </View>
 
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index f05abfd6a0de..3a7e0f19c4cd 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -6,6 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
+import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -32,6 +33,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     const theme = useTheme();
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const {isFullScreenRef} = useFullScreenContext();
     const scrollRef = useRef<FlatList>(null);
 
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
@@ -76,6 +78,10 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     /** Updates the page state when the user navigates between attachments */
     const updatePage = useCallback(
         ({viewableItems}: UpdatePageProps) => {
+            if (isFullScreenRef.current) {
+                return;
+            }
+
             Keyboard.dismiss();
 
             // Since we can have only one item in view at a time, we can use the first item in the array
@@ -95,12 +101,16 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                 onNavigate(entry.item);
             }
         },
-        [onNavigate],
+        [isFullScreenRef, onNavigate],
     );
 
     /** Increments or decrements the index to get another selected item */
     const cycleThroughAttachments = useCallback(
         (deltaSlide: number) => {
+            if (isFullScreenRef.current) {
+                return;
+            }
+
             const nextIndex = page + deltaSlide;
             const nextItem = attachments[nextIndex];
 
@@ -110,7 +120,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
             scrollRef.current.scrollToIndex({index: nextIndex, animated: canUseTouchScreen});
         },
-        [attachments, canUseTouchScreen, page],
+        [attachments, canUseTouchScreen, isFullScreenRef, page],
     );
 
     const extractItemKey = useCallback(
@@ -145,7 +155,12 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     return (
         <View
             style={[styles.flex1, styles.attachmentCarouselContainer]}
-            onLayout={({nativeEvent}) => setContainerWidth(PixelRatio.roundToNearestPixel(nativeEvent.layout.width))}
+            onLayout={({nativeEvent}) => {
+                if (isFullScreenRef.current) {
+                    return;
+                }
+                setContainerWidth(PixelRatio.roundToNearestPixel(nativeEvent.layout.width));
+            }}
             onMouseEnter={() => !canUseTouchScreen && setShouldShowArrows(true)}
             onMouseLeave={() => !canUseTouchScreen && setShouldShowArrows(false)}
         >
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
index 03e0c0252a66..9e91bfd64fed 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
+++ b/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
@@ -12,13 +12,13 @@ type AttachmentViewVideoProps = Pick<AttachmentViewProps, 'duration' | 'isHovere
 };
 
 function AttachmentViewVideo({source, isHovered = false, shouldUseSharedVideoElement = false, duration = 0}: AttachmentViewVideoProps) {
-    const {isSmallScreen} = useWindowDimensions();
+    const {isSmallScreenWidth} = useWindowDimensions();
     const styles = useThemeStyles();
 
     return (
         <VideoPlayer
             url={source}
-            shouldUseSharedVideoElement={shouldUseSharedVideoElement && !isSmallScreen}
+            shouldUseSharedVideoElement={shouldUseSharedVideoElement && !isSmallScreenWidth}
             isVideoHovered={isHovered}
             videoDuration={duration}
             style={[styles.w100, styles.h100]}
diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js
index 69a3cad681f9..91737ad3938a 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.js
+++ b/src/components/VideoPlayer/BaseVideoPlayer.js
@@ -6,12 +6,12 @@ import _ from 'underscore';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Hoverable from '@components/Hoverable';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import VideoPopoverMenu from '@components/VideoPopoverMenu';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
-import * as Browser from '@libs/Browser';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import {videoPlayerDefaultProps, videoPlayerPropTypes} from './propTypes';
@@ -19,8 +19,6 @@ import shouldReplayVideo from './shouldReplayVideo';
 import * as VideoUtils from './utils';
 import VideoPlayerControls from './VideoPlayerControls';
 
-const isMobileSafari = Browser.isMobileSafari();
-
 function BaseVideoPlayer({
     url,
     resizeMode,
@@ -44,8 +42,19 @@ function BaseVideoPlayer({
     isVideoHovered,
 }) {
     const styles = useThemeStyles();
-    const {pauseVideo, playVideo, currentlyPlayingURL, updateSharedElements, sharedElement, originalParent, shareVideoPlayerElements, currentVideoPlayerRef, updateCurrentlyPlayingURL} =
-        usePlaybackContext();
+    const {
+        pauseVideo,
+        playVideo,
+        currentlyPlayingURL,
+        updateSharedElements,
+        sharedElement,
+        originalParent,
+        shareVideoPlayerElements,
+        currentVideoPlayerRef,
+        updateCurrentlyPlayingURL,
+        videoResumeTryNumber,
+    } = usePlaybackContext();
+    const {isFullScreenRef} = useFullScreenContext();
     const {isOffline} = useNetwork();
     const [duration, setDuration] = useState(videoDuration * 1000);
     const [position, setPosition] = useState(0);
@@ -60,24 +69,21 @@ function BaseVideoPlayer({
     const videoPlayerElementParentRef = useRef(null);
     const videoPlayerElementRef = useRef(null);
     const sharedVideoPlayerParentRef = useRef(null);
-    const videoResumeTryNumber = useRef(0);
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
     const isCurrentlyURLSet = currentlyPlayingURL === url;
     const isUploading = _.some(CONST.ATTACHMENT_LOCAL_URL_PREFIX, (prefix) => url.startsWith(prefix));
-    const shouldUseSharedVideoElementRef = useRef(shouldUseSharedVideoElement);
-
-    const [isFullscreen, setIsFullscreen] = useState(false);
+    const videoStateRef = useRef(null);
 
     const togglePlayCurrentVideo = useCallback(() => {
         videoResumeTryNumber.current = 0;
         if (!isCurrentlyURLSet) {
             updateCurrentlyPlayingURL(url);
-        } else if (isPlaying && !isFullscreen) {
+        } else if (isPlaying) {
             pauseVideo();
-        } else if (!isFullscreen) {
+        } else {
             playVideo();
         }
-    }, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, updateCurrentlyPlayingURL, url, isFullscreen]);
+    }, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, updateCurrentlyPlayingURL, url, videoResumeTryNumber]);
 
     const showPopoverMenu = (e) => {
         setPopoverAnchorPosition({horizontal: e.nativeEvent.pageX, vertical: e.nativeEvent.pageY});
@@ -99,7 +105,7 @@ function BaseVideoPlayer({
             }
             videoResumeTryNumber.current -= 1;
         },
-        [playVideo],
+        [playVideo, videoResumeTryNumber],
     );
 
     const handlePlaybackStatusUpdate = useCallback(
@@ -118,7 +124,7 @@ function BaseVideoPlayer({
             setIsBuffering(e.isBuffering || false);
             setDuration(currentDuration);
             setPosition(currentPositon);
-
+            videoStateRef.current = e;
             onPlaybackStatusUpdate(e);
         },
         [onPlaybackStatusUpdate, preventPausingWhenExitingFullscreen, videoDuration],
@@ -127,22 +133,20 @@ function BaseVideoPlayer({
     const handleFullscreenUpdate = useCallback(
         (e) => {
             onFullscreenUpdate(e);
-
-            setIsFullscreen(e.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_PRESENT);
-
             // fix for iOS native and mWeb: when switching to fullscreen and then exiting
             // the fullscreen mode while playing, the video pauses
-            if (!isPlaying || e.fullscreenUpdate !== VideoFullscreenUpdate.PLAYER_DID_DISMISS) {
-                return;
+            if (e.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_DISMISS) {
+                isFullScreenRef.current = false;
+                // we need to use video state ref to check if video is playing, to catch proper state after exiting fullscreen
+                // and also fix a bug with fullscreen mode dismissing when handleFullscreenUpdate function changes
+                if (videoStateRef.current && videoStateRef.current.isPlaying) {
+                    pauseVideo();
+                    playVideo();
+                    videoResumeTryNumber.current = 3;
+                }
             }
-
-            if (isMobileSafari) {
-                pauseVideo();
-            }
-            playVideo();
-            videoResumeTryNumber.current = 3;
         },
-        [isPlaying, onFullscreenUpdate, pauseVideo, playVideo],
+        [isFullScreenRef, onFullscreenUpdate, pauseVideo, playVideo, videoResumeTryNumber],
     );
 
     const bindFunctions = useCallback(() => {
@@ -156,7 +160,7 @@ function BaseVideoPlayer({
     }, [currentVideoPlayerRef, handleFullscreenUpdate, handlePlaybackStatusUpdate]);
 
     useEffect(() => {
-        if (!isUploading) {
+        if (!isUploading || !videoPlayerRef.current) {
             return;
         }
 
@@ -164,37 +168,29 @@ function BaseVideoPlayer({
         currentVideoPlayerRef.current = videoPlayerRef.current;
     }, [url, currentVideoPlayerRef, isUploading]);
 
-    useEffect(() => {
-        shouldUseSharedVideoElementRef.current = shouldUseSharedVideoElement;
-    }, [shouldUseSharedVideoElement]);
-
-    useEffect(
-        () => () => {
-            if (shouldUseSharedVideoElementRef.current) {
-                return;
-            }
-
-            // If it's not a shared video player, clear the video player ref.
-            currentVideoPlayerRef.current = null;
-        },
-        [currentVideoPlayerRef],
-    );
-
     // update shared video elements
     useEffect(() => {
-        if (shouldUseSharedVideoElement || url !== currentlyPlayingURL) {
+        if (shouldUseSharedVideoElement || url !== currentlyPlayingURL || isFullScreenRef.current) {
             return;
         }
         shareVideoPlayerElements(videoPlayerRef.current, videoPlayerElementParentRef.current, videoPlayerElementRef.current, isUploading);
-    }, [currentlyPlayingURL, shouldUseSharedVideoElement, shareVideoPlayerElements, updateSharedElements, url, isUploading]);
+    }, [currentlyPlayingURL, shouldUseSharedVideoElement, shareVideoPlayerElements, updateSharedElements, url, isUploading, isFullScreenRef]);
 
     // append shared video element to new parent (used for example in attachment modal)
     useEffect(() => {
-        if (url !== currentlyPlayingURL || !sharedElement || !shouldUseSharedVideoElement) {
+        if (url !== currentlyPlayingURL || !sharedElement || isFullScreenRef.current) {
             return;
         }
 
         const newParentRef = sharedVideoPlayerParentRef.current;
+
+        if (!shouldUseSharedVideoElement) {
+            if (newParentRef && newParentRef.childNodes[0] && newParentRef.childNodes[0].remove) {
+                newParentRef.childNodes[0].remove();
+            }
+            return;
+        }
+
         videoPlayerRef.current = currentVideoPlayerRef.current;
         if (currentlyPlayingURL === url) {
             newParentRef.appendChild(sharedElement);
@@ -204,9 +200,10 @@ function BaseVideoPlayer({
             if (!originalParent && !newParentRef.childNodes[0]) {
                 return;
             }
+            newParentRef.childNodes[0].remove();
             originalParent.appendChild(sharedElement);
         };
-    }, [bindFunctions, currentVideoPlayerRef, currentlyPlayingURL, originalParent, sharedElement, shouldUseSharedVideoElement, url]);
+    }, [bindFunctions, currentVideoPlayerRef, currentlyPlayingURL, isFullScreenRef, originalParent, sharedElement, shouldUseSharedVideoElement, url]);
 
     return (
         <>
@@ -222,6 +219,9 @@ function BaseVideoPlayer({
                             <PressableWithoutFeedback
                                 accessibilityRole="button"
                                 onPress={() => {
+                                    if (isFullScreenRef.current) {
+                                        return;
+                                    }
                                     togglePlayCurrentVideo();
                                 }}
                                 style={styles.flex1}
diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/index.tsx
index 7c61721b67b7..1ac07fd1eaaf 100644
--- a/src/components/VideoPlayer/VideoPlayerControls/index.tsx
+++ b/src/components/VideoPlayer/VideoPlayerControls/index.tsx
@@ -8,6 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import IconButton from '@components/VideoPlayer/IconButton';
 import {convertMillisecondsToTime} from '@components/VideoPlayer/utils';
+import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -48,6 +49,7 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
+    const {isFullScreenRef} = useFullScreenContext();
     const [shouldShowTime, setShouldShowTime] = useState(false);
     const iconSpacing = small ? styles.mr3 : styles.mr4;
 
@@ -56,9 +58,10 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying
     };
 
     const enterFullScreenMode = useCallback(() => {
+        isFullScreenRef.current = true;
         updateCurrentlyPlayingURL(url);
         videoPlayerRef.current.presentFullscreenPlayer();
-    }, [updateCurrentlyPlayingURL, url, videoPlayerRef]);
+    }, [isFullScreenRef, updateCurrentlyPlayingURL, url, videoPlayerRef]);
 
     const seekPosition = useCallback(
         (newPosition: number) => {
diff --git a/src/components/VideoPlayerContexts/FullScreenContext.tsx b/src/components/VideoPlayerContexts/FullScreenContext.tsx
new file mode 100644
index 000000000000..8634e27b9d1e
--- /dev/null
+++ b/src/components/VideoPlayerContexts/FullScreenContext.tsx
@@ -0,0 +1,34 @@
+import React, {useCallback, useContext, useMemo, useRef} from 'react';
+import type WindowDimensions from '@hooks/useWindowDimensions/types';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import type {FullScreenContext} from './types';
+
+const Context = React.createContext<FullScreenContext | null>(null);
+
+function FullScreenContextProvider({children}: ChildrenProps) {
+    const isFullScreenRef = useRef(false);
+    const lockedWindowDimensionsRef = useRef<WindowDimensions | null>(null);
+
+    const lockWindowDimensions = useCallback((newWindowDimensions: WindowDimensions) => {
+        lockedWindowDimensionsRef.current = newWindowDimensions;
+    }, []);
+
+    const unlockWindowDimensions = useCallback(() => {
+        lockedWindowDimensionsRef.current = null;
+    }, []);
+
+    const contextValue = useMemo(() => ({isFullScreenRef, lockedWindowDimensionsRef, lockWindowDimensions, unlockWindowDimensions}), [lockWindowDimensions, unlockWindowDimensions]);
+    return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+}
+
+function useFullScreenContext() {
+    const fullscreenContext = useContext(Context);
+    if (!fullscreenContext) {
+        throw new Error('useFullScreenContext must be used within a FullScreenContextProvider');
+    }
+    return fullscreenContext;
+}
+
+FullScreenContextProvider.displayName = 'FullScreenContextProvider';
+
+export {Context as FullScreenContext, FullScreenContextProvider, useFullScreenContext};
diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index fc07f3d20ea0..71d999da6aec 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -13,6 +13,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     const [originalParent, setOriginalParent] = useState<View | null>(null);
     const currentVideoPlayerRef = useRef<Video | null>(null);
     const {currentReportID} = useCurrentReportID() ?? {};
+    const videoResumeTryNumber = useRef(0);
 
     const pauseVideo = useCallback(() => {
         currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false});
@@ -69,6 +70,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     );
 
     const resetVideoPlayerData = useCallback(() => {
+        videoResumeTryNumber.current = 0;
         stopVideo();
         setCurrentlyPlayingURL(null);
         setSharedElement(null);
@@ -95,6 +97,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             playVideo,
             pauseVideo,
             checkVideoPlaying,
+            videoResumeTryNumber,
         }),
         [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying],
     );
@@ -111,4 +114,4 @@ function usePlaybackContext() {
 
 PlaybackContextProvider.displayName = 'PlaybackContextProvider';
 
-export {PlaybackContextProvider, usePlaybackContext};
+export {Context as PlaybackContext, PlaybackContextProvider, usePlaybackContext};
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index ae46d795f4e7..0a0986d3feb9 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -3,6 +3,7 @@ import type {MutableRefObject} from 'react';
 import type {View} from 'react-native';
 import type {SharedValue} from 'react-native-reanimated';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
+import type WindowDimensions from '@hooks/useWindowDimensions/types';
 import type CONST from '@src/CONST';
 
 type PlaybackContext = {
@@ -27,8 +28,15 @@ type VideoPopoverMenuContext = {
     updatePlaybackSpeed: (speed: PlaybackSpeed) => void;
 };
 
+type FullScreenContext = {
+    isFullScreenRef: MutableRefObject<boolean>;
+    lockedWindowDimensionsRef: MutableRefObject<WindowDimensions | null>;
+    lockWindowDimensions: (newWindowDimensions: WindowDimensions) => void;
+    unlockWindowDimensions: () => void;
+};
+
 type StatusCallback = (isPlaying: boolean) => void;
 
 type PlaybackSpeed = (typeof CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS)[number];
 
-export type {PlaybackContext, VolumeContext, VideoPopoverMenuContext, StatusCallback, PlaybackSpeed};
+export type {PlaybackContext, VolumeContext, VideoPopoverMenuContext, FullScreenContext, StatusCallback, PlaybackSpeed};
diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts
index e257b03e2865..25757fda17e5 100644
--- a/src/hooks/useWindowDimensions/index.ts
+++ b/src/hooks/useWindowDimensions/index.ts
@@ -1,6 +1,7 @@
-import {useEffect, useRef} from 'react';
+import {useContext, useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Dimensions, useWindowDimensions} from 'react-native';
+import {FullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
 import useDebouncedState from '@hooks/useDebouncedState';
 import * as Browser from '@libs/Browser';
 import variables from '@styles/variables';
@@ -9,11 +10,19 @@ import type WindowDimensions from './types';
 
 const initalViewportHeight = window.visualViewport?.height ?? window.innerHeight;
 const tagNamesOpenKeyboard = ['INPUT', 'TEXTAREA'];
+const isMobile = Browser.isMobile();
 
 /**
  * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints.
  */
 export default function (useCachedViewportHeight = false): WindowDimensions {
+    const {isFullScreenRef, lockedWindowDimensionsRef, lockWindowDimensions, unlockWindowDimensions} = useContext(FullScreenContext) ?? {
+        isFullScreenRef: useRef(false),
+        lockedWindowDimensionsRef: useRef<WindowDimensions | null>(null),
+        lockWindowDimensions: () => {},
+        unlockWindowDimensions: () => {},
+    };
+
     const isCachedViewportHeight = useCachedViewportHeight && Browser.isMobileSafari();
     const cachedViewportHeightWithKeyboardRef = useRef(initalViewportHeight);
     const {width: windowWidth, height: windowHeight} = useWindowDimensions();
@@ -82,7 +91,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
         cachedViewportHeightWithKeyboardRef.current = windowHeight;
     }, [isCachedViewportHeight, windowHeight]);
 
-    return {
+    const windowDimensions = {
         windowWidth,
         windowHeight: isCachedViewportHeight ? cachedViewportHeight : windowHeight,
         isExtraSmallScreenHeight,
@@ -92,4 +101,35 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
         isExtraSmallScreenWidth,
         isSmallScreen,
     };
+
+    if (!lockedWindowDimensionsRef.current && !isFullScreenRef.current) {
+        return windowDimensions;
+    }
+
+    const didScreenChangeOrientation =
+        isMobile &&
+        lockedWindowDimensionsRef.current &&
+        isExtraSmallScreenWidth === lockedWindowDimensionsRef.current.isExtraSmallScreenWidth &&
+        isSmallScreenWidth === lockedWindowDimensionsRef.current.isSmallScreen &&
+        isMediumScreenWidth === lockedWindowDimensionsRef.current.isMediumScreenWidth &&
+        isLargeScreenWidth === lockedWindowDimensionsRef.current.isLargeScreenWidth &&
+        lockedWindowDimensionsRef.current.windowWidth !== windowWidth &&
+        lockedWindowDimensionsRef.current.windowHeight !== windowHeight;
+
+    // if video is in fullscreen mode, lock the window dimensions since they can change and casue whole app to re-render
+    if (!lockedWindowDimensionsRef.current || didScreenChangeOrientation) {
+        lockWindowDimensions(windowDimensions);
+        return windowDimensions;
+    }
+
+    const didScreenReturnToOriginalSize = lockedWindowDimensionsRef.current.windowWidth === windowWidth && lockedWindowDimensionsRef.current.windowHeight === windowHeight;
+
+    // if video exits fullscreen mode, unlock the window dimensions
+    if (lockedWindowDimensionsRef.current && !isFullScreenRef.current && didScreenReturnToOriginalSize) {
+        const lastLockedWindowDimensions = {...lockedWindowDimensionsRef.current};
+        unlockWindowDimensions();
+        return lastLockedWindowDimensions;
+    }
+
+    return lockedWindowDimensionsRef.current;
 }
diff --git a/src/styles/index.ts b/src/styles/index.ts
index a5d1fff864e9..12b8db8ecf9e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4592,6 +4592,8 @@ const styles = (theme: ThemeColors) =>
             fontWeight: '700',
             lineHeight: 16,
             color: theme.white,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
         },
 
         volumeSliderContainer: {