diff --git a/src/lib/viewers/controls/media/MediaSettings.tsx b/src/lib/viewers/controls/media/MediaSettings.tsx
index dd9ef4e91..a974956c8 100644
--- a/src/lib/viewers/controls/media/MediaSettings.tsx
+++ b/src/lib/viewers/controls/media/MediaSettings.tsx
@@ -39,17 +39,33 @@ export default function MediaSettings({
     return (
         <Settings badge={badge} className={className} toggle={toggle}>
             <Settings.Menu name={Menu.MAIN}>
-                <Settings.MenuItem label={__('media_autoplay')} target={Menu.AUTOPLAY} value={autoValue} />
-                <Settings.MenuItem label={__('media_speed')} target={Menu.RATE} value={rateValue} />
+                <Settings.MenuItem
+                    data-testid="bp-media-settings-autoplay"
+                    label={__('media_autoplay')}
+                    target={Menu.AUTOPLAY}
+                    value={autoValue}
+                />
+                <Settings.MenuItem
+                    data-testid="bp-media-settings-speed"
+                    label={__('media_speed')}
+                    target={Menu.RATE}
+                    value={rateValue}
+                />
                 {quality && (
                     <Settings.MenuItem
+                        data-testid="bp-media-settings-quality"
                         label={__('media_quality')}
                         target={Menu.QUALITY}
                         value={getQualityLabel(quality)}
                     />
                 )}
                 {showAudioTrackItems && (
-                    <Settings.MenuItem label={__('media_audio')} target={Menu.AUDIO} value={audioTrackLabel} />
+                    <Settings.MenuItem
+                        data-testid="bp-media-settings-audiotracks"
+                        label={__('media_audio')}
+                        target={Menu.AUDIO}
+                        value={audioTrackLabel}
+                    />
                 )}
             </Settings.Menu>
 
diff --git a/src/lib/viewers/controls/settings/SettingsFlyout.tsx b/src/lib/viewers/controls/settings/SettingsFlyout.tsx
index 10efe8983..27b6d7e96 100644
--- a/src/lib/viewers/controls/settings/SettingsFlyout.tsx
+++ b/src/lib/viewers/controls/settings/SettingsFlyout.tsx
@@ -44,6 +44,7 @@ export default function SettingsFlyout({
                 'bp-is-open': isOpen,
                 'bp-is-transitioning': isTransitioning,
             })}
+            data-testid="bp-settings-flyout"
             style={{ height, width }}
         >
             {isOpen && children}
diff --git a/src/lib/viewers/controls/settings/SettingsMenuItem.tsx b/src/lib/viewers/controls/settings/SettingsMenuItem.tsx
index 03163a4fd..84a2d2d64 100644
--- a/src/lib/viewers/controls/settings/SettingsMenuItem.tsx
+++ b/src/lib/viewers/controls/settings/SettingsMenuItem.tsx
@@ -5,7 +5,7 @@ import SettingsContext, { Menu } from './SettingsContext';
 import { decodeKeydown } from '../../../util';
 import './SettingsMenuItem.scss';
 
-export type Props = {
+export type Props = React.RefAttributes<HTMLDivElement> & {
     className?: string;
     label: string;
     target: Menu;
@@ -14,7 +14,7 @@ export type Props = {
 export type Ref = HTMLDivElement;
 
 function SettingsMenuItem(props: Props, ref: React.Ref<Ref>): JSX.Element {
-    const { className, label, target, value } = props;
+    const { className, label, target, value, ...rest } = props;
     const { setActiveMenu } = React.useContext(SettingsContext);
 
     const handleClick = (): void => {
@@ -40,6 +40,7 @@ function SettingsMenuItem(props: Props, ref: React.Ref<Ref>): JSX.Element {
             onKeyDown={handleKeydown}
             role="menuitem"
             tabIndex={0}
+            {...rest}
         >
             <div aria-label={label} className="bp-SettingsMenuItem-label">
                 {label}
diff --git a/src/lib/viewers/media/DashControls.tsx b/src/lib/viewers/media/DashControls.tsx
index 6674da161..b37bbbc1d 100644
--- a/src/lib/viewers/media/DashControls.tsx
+++ b/src/lib/viewers/media/DashControls.tsx
@@ -38,7 +38,7 @@ export default function DashControls({
     volume,
 }: Props): JSX.Element {
     return (
-        <div className="bp-DashControls">
+        <div className="bp-DashControls" data-testid="media-controls-wrapper">
             <TimeControls
                 bufferedRange={bufferedRange}
                 currentTime={currentTime}
diff --git a/src/lib/viewers/media/MP3Controls.tsx b/src/lib/viewers/media/MP3Controls.tsx
index 544c11053..af87d85be 100644
--- a/src/lib/viewers/media/MP3Controls.tsx
+++ b/src/lib/viewers/media/MP3Controls.tsx
@@ -28,7 +28,7 @@ export default function MP3Controls({
     volume,
 }: Props): JSX.Element {
     return (
-        <div className="bp-MP3Controls">
+        <div className="bp-MP3Controls" data-testid="media-controls-wrapper">
             <TimeControls
                 bufferedRange={bufferedRange}
                 currentTime={currentTime}
diff --git a/src/lib/viewers/media/MP4Controls.tsx b/src/lib/viewers/media/MP4Controls.tsx
index 7dec11947..855ae3dbb 100644
--- a/src/lib/viewers/media/MP4Controls.tsx
+++ b/src/lib/viewers/media/MP4Controls.tsx
@@ -31,7 +31,7 @@ export default function MP4Controls({
     volume,
 }: Props): JSX.Element {
     return (
-        <div className="bp-MP4Controls">
+        <div className="bp-MP4Controls" data-testid="media-controls-wrapper">
             <TimeControls
                 bufferedRange={bufferedRange}
                 currentTime={currentTime}
diff --git a/src/lib/viewers/media/Settings.js b/src/lib/viewers/media/Settings.js
index 4425f750d..b2dac71ae 100644
--- a/src/lib/viewers/media/Settings.js
+++ b/src/lib/viewers/media/Settings.js
@@ -26,29 +26,29 @@ const SETTINGS_MENU_PADDING = 18;
 const SETTINGS_MENU_PADDING_SCROLL = 32;
 const SETTINGS_MENU_MAX_HEIGHT = 210;
 
-const SETTINGS_TEMPLATE = `<div class="bp-media-settings">
+const SETTINGS_TEMPLATE = `<div class="bp-media-settings" data-testid="bp-settings-flyout">
     <div class="bp-media-settings-menu-main bp-media-settings-menu" role="menu">
-        <div class="bp-media-settings-item bp-media-settings-item-autoplay" data-type="autoplay" tabindex="0" role="menuitem" aria-haspopup="true">
+        <div class="bp-media-settings-item bp-media-settings-item-autoplay" data-testid="bp-media-settings-autoplay" data-type="autoplay" tabindex="0" role="menuitem" aria-haspopup="true">
             <div class="bp-media-settings-label" aria-label="${__('media_autoplay')}">${__('media_autoplay')}</div>
             <div class="bp-media-settings-value">${__('media_autoplay_disabled')}</div>
             <div class="bp-media-settings-arrow">${ICON_ARROW_RIGHT}</div>
         </div>
-        <div class="bp-media-settings-item bp-media-settings-item-speed" data-type="speed" tabindex="0" role="menuitem" aria-haspopup="true">
+        <div class="bp-media-settings-item bp-media-settings-item-speed" data-testid="bp-media-settings-speed" data-type="speed" tabindex="0" role="menuitem" aria-haspopup="true">
             <div class="bp-media-settings-label" aria-label="${__('media_speed')}">${__('media_speed')}</div>
             <div class="bp-media-settings-value">${__('media_speed_normal')}</div>
             <div class="bp-media-settings-arrow">${ICON_ARROW_RIGHT}</div>
         </div>
-        <div class="bp-media-settings-item bp-media-settings-item-quality" data-type="quality" tabindex="0" role="menuitem" aria-haspopup="true">
+        <div class="bp-media-settings-item bp-media-settings-item-quality" data-testid="bp-media-settings-quality" data-type="quality" tabindex="0" role="menuitem" aria-haspopup="true">
             <div class="bp-media-settings-label" aria-label="${__('media_quality')}">${__('media_quality')}</div>
             <div class="bp-media-settings-value">${__('media_quality_auto')}</div>
             <div class="bp-media-settings-arrow">${ICON_ARROW_RIGHT}</div>
         </div>
-        <div class="bp-media-settings-item bp-media-settings-item-subtitles bp-media-settings-is-hidden" data-type="subtitles" tabindex="0" role="menuitem" aria-haspopup="true">
+        <div class="bp-media-settings-item bp-media-settings-item-subtitles data-testid="bp-media-settings-subtitles" bp-media-settings-is-hidden" data-type="subtitles" tabindex="0" role="menuitem" aria-haspopup="true">
             <div class="bp-media-settings-label" aria-label="${__('subtitles')}/CC">${__('subtitles')}/CC</div>
             <div class="bp-media-settings-value">${__('off')}</div>
             <div class="bp-media-settings-arrow">${ICON_ARROW_RIGHT}</div>
         </div>
-        <div class="bp-media-settings-item bp-media-settings-item-audiotracks bp-media-settings-is-hidden" data-type="audiotracks" tabindex="0" role="menuitem" aria-haspopup="true">
+        <div class="bp-media-settings-item bp-media-settings-item-audiotracks bp-media-settings-is-hidden" data-testid="bp-media-settings-audiotracks" data-type="audiotracks" tabindex="0" role="menuitem" aria-haspopup="true">
             <div class="bp-media-settings-label" aria-label="${__('media_audio')}">${__('media_audio')}</div>
             <div class="bp-media-settings-value"></div>
             <div class="bp-media-settings-arrow">${ICON_ARROW_RIGHT}</div>
diff --git a/test/integration/media/DashViewer.e2e.test.js b/test/integration/media/DashViewer.e2e.test.js
new file mode 100644
index 000000000..d85d60354
--- /dev/null
+++ b/test/integration/media/DashViewer.e2e.test.js
@@ -0,0 +1,30 @@
+import { runBaseMediaSettingsTests } from '../../support/mediaSettingsTests';
+
+describe('Dash Viewer', () => {
+    const token = Cypress.env('ACCESS_TOKEN');
+    const fileIdVideo = Cypress.env('FILE_ID_VIDEO');
+
+    describe('Media Settings Controls', () => {
+        describe('Without react controls', () => {
+            beforeEach(() => {
+                cy.visit('/');
+                cy.showPreview(token, fileIdVideo, {
+                    viewers: { Dash: { useReactControls: false } },
+                });
+            });
+
+            runBaseMediaSettingsTests();
+        });
+
+        describe('With react controls', () => {
+            beforeEach(() => {
+                cy.visit('/');
+                cy.showPreview(token, fileIdVideo, {
+                    viewers: { Dash: { useReactControls: true } },
+                });
+            });
+
+            runBaseMediaSettingsTests();
+        });
+    });
+});
diff --git a/test/integration/media/MP3Viewer.e2e.test.js b/test/integration/media/MP3Viewer.e2e.test.js
new file mode 100644
index 000000000..5f2a6af58
--- /dev/null
+++ b/test/integration/media/MP3Viewer.e2e.test.js
@@ -0,0 +1,30 @@
+import { runBaseMediaSettingsTests } from '../../support/mediaSettingsTests';
+
+describe('MP3 Viewer', () => {
+    const token = Cypress.env('ACCESS_TOKEN');
+    const fileIdMP3 = Cypress.env('FILE_ID_MP3');
+
+    describe('Media Settings Controls', () => {
+        describe('Without react controls', () => {
+            beforeEach(() => {
+                cy.visit('/');
+                cy.showPreview(token, fileIdMP3, {
+                    viewers: { MP3: { useReactControls: false } },
+                });
+            });
+
+            runBaseMediaSettingsTests();
+        });
+
+        describe('With react controls', () => {
+            beforeEach(() => {
+                cy.visit('/');
+                cy.showPreview(token, fileIdMP3, {
+                    viewers: { MP3: { useReactControls: true } },
+                });
+            });
+
+            runBaseMediaSettingsTests();
+        });
+    });
+});
diff --git a/test/integration/media/MP4Viewer.e2e.test.js b/test/integration/media/MP4Viewer.e2e.test.js
new file mode 100644
index 000000000..4edd145ca
--- /dev/null
+++ b/test/integration/media/MP4Viewer.e2e.test.js
@@ -0,0 +1,30 @@
+import { runBaseMediaSettingsTests } from '../../support/mediaSettingsTests';
+
+describe('MP4 Viewer', () => {
+    const token = Cypress.env('ACCESS_TOKEN');
+    const fileIdVideo = Cypress.env('FILE_ID_VIDEO');
+
+    describe('Media Settings Controls', () => {
+        describe('Without react controls', () => {
+            beforeEach(() => {
+                cy.visit('/');
+                cy.showPreview(token, fileIdVideo, {
+                    viewers: { Dash: { disabled: true }, MP4: { useReactControls: false } },
+                });
+            });
+
+            runBaseMediaSettingsTests();
+        });
+
+        describe('With react controls', () => {
+            beforeEach(() => {
+                cy.visit('/');
+                cy.showPreview(token, fileIdVideo, {
+                    viewers: { Dash: { disabled: true }, MP4: { useReactControls: true } },
+                });
+            });
+
+            runBaseMediaSettingsTests();
+        });
+    });
+});
diff --git a/test/integration/media/Video360Viewer.e2e.test.js b/test/integration/media/Video360Viewer.e2e.test.js
new file mode 100644
index 000000000..b32150f6c
--- /dev/null
+++ b/test/integration/media/Video360Viewer.e2e.test.js
@@ -0,0 +1,19 @@
+import { runBaseMediaSettingsTests } from '../../support/mediaSettingsTests';
+
+describe('Video360 Viewer', () => {
+    const token = Cypress.env('ACCESS_TOKEN');
+    const fileIdVideo360 = Cypress.env('FILE_ID_VIDEO_360');
+
+    describe('Media Settings Controls', () => {
+        describe('Without react controls', () => {
+            beforeEach(() => {
+                cy.visit('/');
+                cy.showPreview(token, fileIdVideo360, {
+                    viewers: { Video360: { useReactControls: false } },
+                });
+            });
+
+            runBaseMediaSettingsTests();
+        });
+    });
+});
diff --git a/test/integration/sanity/FileOptions.e2e.test.js b/test/integration/sanity/FileOptions.e2e.test.js
index e53b5a5a7..3a706db70 100644
--- a/test/integration/sanity/FileOptions.e2e.test.js
+++ b/test/integration/sanity/FileOptions.e2e.test.js
@@ -27,15 +27,6 @@ describe('Preview File Options', () => {
         },
     };
 
-    /* eslint-disable */
-    const showMediaControls = () => {
-        // Hover over the preview to trigger the controls
-        cy.getByTestId('bp').trigger('mouseover');
-        // Assert that the controls are shown
-        return cy.getByTestId('media-controls-wrapper').should('be.visible');
-    };
-    /* eslint-enable */
-
     beforeEach(() => {
         cy.visit('/');
     });
@@ -51,18 +42,18 @@ describe('Preview File Options', () => {
     it('Should open video(DASH) to the specified timestamp', () => {
         cy.showPreview(token, fileIdVideo, { fileOptions });
 
-        showMediaControls().contains('0:15');
+        cy.showMediaControls().contains('0:15');
     });
 
     it('Should open video(MP4) to the specified timestamp', () => {
         cy.showPreview(token, fileIdVideo, { fileOptions, viewers: { Dash: { disabled: true } } });
 
-        showMediaControls().contains('0:15');
+        cy.showMediaControls().contains('0:15');
     });
 
     it('Should open MP3 to the specified timestamp', () => {
         cy.showPreview(token, fileIdMp3, { fileOptions });
 
-        showMediaControls().contains('0:03');
+        cy.showMediaControls().contains('0:03');
     });
 });
diff --git a/test/support/commands.js b/test/support/commands.js
index 6cc875985..53c788b4e 100644
--- a/test/support/commands.js
+++ b/test/support/commands.js
@@ -31,3 +31,10 @@ Cypress.Commands.add('showControls', () => {
     cy.getByTestId('bp').trigger('mouseover');
     cy.getByTestId('bp-controls').should('be.visible');
 });
+
+Cypress.Commands.add('showMediaControls', () => {
+    // Hover over the preview to trigger the controls
+    cy.getByTestId('bp').trigger('mouseover');
+    // Assert that the controls are shown
+    return cy.getByTestId('media-controls-wrapper').should('be.visible');
+});
diff --git a/test/support/constants.js b/test/support/constants.js
index 70305bf1b..d10b8ef6a 100644
--- a/test/support/constants.js
+++ b/test/support/constants.js
@@ -19,4 +19,5 @@ Cypress.env({
     FILE_ID_VIDEO_SMALL: '415542846356',
     FILE_ID_VIDEO_SUBTITLES_TRACKS: '415542245854',
     FILE_ID_VIDEO: '416047501580',
+    FILE_ID_VIDEO_360: '818568699040',
 });
diff --git a/test/support/mediaSettingsTests.js b/test/support/mediaSettingsTests.js
new file mode 100644
index 000000000..2dbbc8f80
--- /dev/null
+++ b/test/support/mediaSettingsTests.js
@@ -0,0 +1,59 @@
+// eslint-disable-next-line import/prefer-default-export
+export function runBaseMediaSettingsTests() {
+    beforeEach(() => {
+        cy.showMediaControls();
+
+        // Open the menu
+        cy.getByTitle('Settings').click({ force: true });
+    });
+
+    describe('Base Media Settings', () => {
+        it('Should be able to toggle media settings menu', () => {
+            cy.getByTestId('bp-settings-flyout').should('be.visible');
+            cy.getByTestId('bp-media-settings-autoplay').contains('Disabled');
+            cy.getByTestId('bp-media-settings-speed').contains('Normal');
+
+            // Close the menu
+            cy.getByTitle('Settings').click({ force: true });
+            cy.getByTestId('bp-settings-flyout').should('not.be.visible');
+        });
+
+        it('Should be able to click away from media settings menu to close it', () => {
+            cy.getByTestId('bp-settings-flyout').should('be.visible');
+            cy.getByTestId('bp-media-settings-autoplay').contains('Disabled');
+            cy.getByTestId('bp-media-settings-speed').contains('Normal');
+
+            // Click away from menu
+            cy.getByTestId('bp').click();
+            cy.getByTestId('bp-settings-flyout').should('not.be.visible');
+        });
+
+        it('Should be able to change the Autoplay setting', () => {
+            cy.getByTestId('bp-media-settings-autoplay')
+                .contains('Disabled')
+                .click();
+
+            cy.get('[role="menuitem"]').contains('Autoplay');
+
+            cy.getByTestId('bp-settings-flyout')
+                .contains('Enabled')
+                .click();
+
+            cy.getByTestId('bp-media-settings-autoplay').contains('Enabled');
+        });
+
+        it('Should be able to change the Speed setting', () => {
+            cy.getByTestId('bp-media-settings-speed')
+                .contains('Normal')
+                .click();
+
+            cy.get('[role="menuitem"]').contains('Speed');
+
+            cy.getByTestId('bp-settings-flyout')
+                .contains('0.5')
+                .click();
+
+            cy.getByTestId('bp-media-settings-speed').contains('0.5');
+        });
+    });
+}