diff --git a/app/components/UI/SeedPhraseVideo/index.js b/app/components/UI/SeedPhraseVideo/index.js
index 55dd64c3a94..386e4882b00 100644
--- a/app/components/UI/SeedPhraseVideo/index.js
+++ b/app/components/UI/SeedPhraseVideo/index.js
@@ -1,122 +1,58 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, View, Image, TouchableOpacity } from 'react-native';
-import VideoPlayer from 'react-native-video-controls';
-import { colors, fontStyles } from '../../../styles/common';
-import Logger from '../../../util/Logger';
+import { StyleSheet, View } from 'react-native';
+import AndroidMediaPlayer from '../../Views/MediaPlayer/AndroidMediaPlayer';
+import Video from 'react-native-video';
+import Device from '../../../util/Device';
+import Loader from '../../Views/MediaPlayer/Loader';
 import scaling from '../../../util/scaling';
-import Svg, { Circle, Path } from 'react-native-svg';
-import Text from '../../Base/Text';
-import { strings } from '../../../../locales/i18n';
 
 const styles = StyleSheet.create({
 	videoContainer: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		position: 'relative',
-		borderRadius: 8,
-		overflow: 'hidden',
-		width: '100%',
-		height: 180
-	},
-	image: {
-		zIndex: 0,
-		width: scaling.scale(138),
-		height: scaling.scale(162)
+		height: scaling.scale(240),
+		width: '100%'
 	},
-	cover: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		zIndex: 1,
+	loaderContainer: {
 		position: 'absolute',
-		left: 0,
-		top: 0,
-		backgroundColor: colors.grey,
-		opacity: 0.2,
+		zIndex: 999,
 		width: '100%',
 		height: '100%'
-	},
-	errorWrapper: {
-		justifyContent: 'center',
-		alignItems: 'center'
-	},
-	errorText: {
-		...fontStyles.normal,
-		color: colors.red
 	}
 });
 
-const FAILED_TO_LOAD_MSG = strings('app_settings.video_failed');
-
-// eslint-disable-next-line import/no-commonjs
-const explain_backup_seedphrase = require('../../../images/explain-backup-seedphrase.png');
-
 const video_source_uri =
 	'https://github.com/MetaMask/metamask-mobile/blob/develop/app/videos/recovery-phrase.mp4?raw=true';
 
-const SeedPhraseVideo = ({ style }) => {
-	const [isPlaying, setPlaying] = useState(false);
-	const [isError, setError] = useState(false);
-
-	const reset = useCallback(() => setPlaying(false), [setPlaying]);
-
-	const onError = useCallback(
-		e => {
-			Logger.error(e, FAILED_TO_LOAD_MSG);
-			setError(true);
-			setPlaying(false);
-		},
-		[setError, setPlaying]
-	);
+const SeedPhraseVideo = ({ style, onClose }) => {
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(true);
 
-	const onPlay = useCallback(() => {
-		Logger.log('User clicked play');
-		setPlaying(true);
-	}, [setPlaying]);
+	const onLoad = useCallback(() => setLoading(false), [setLoading]);
+	const onError = useCallback(() => setError(true), [setError]);
 
 	return (
-		<View style={style ? [styles.videoContainer, style] : styles.videoContainer}>
-			{!isPlaying ? (
-				<>
-					{isError ? (
-						<View style={styles.errorWrapper}>
-							<Text style={styles.errorText}>{FAILED_TO_LOAD_MSG}</Text>
-						</View>
-					) : (
-						<>
-							<TouchableOpacity style={styles.cover} onPress={onPlay}>
-								{isError ? <></> : <></>}
-								<Svg
-									width="311"
-									height="176"
-									viewBox="0 0 311 176"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<Circle cx="156" cy="88" r="43" fill="white" />
-									<Path d="M185 87.5L140.75 107.852L140.75 67.1484L185 87.5Z" fill="black" />
-								</Svg>
-							</TouchableOpacity>
-							<Image
-								source={explain_backup_seedphrase}
-								style={styles.image}
-								resizeMethod="auto"
-								testID={'carousel-one-image'}
-							/>
-						</>
-					)}
-				</>
-			) : (
-				<VideoPlayer
-					ignoreSilentSwitch="ignore"
-					disableFullscreen
-					disableBack
+		<View style={styles.videoContainer}>
+			{loading && (
+				<View style={[styles.loaderContainer, style]}>
+					<Loader error={error} onClose={onClose} />
+				</View>
+			)}
+			{Device.isAndroid() ? (
+				<AndroidMediaPlayer
+					onLoad={onLoad}
+					onError={onError}
+					onClose={onClose}
 					source={{ uri: video_source_uri }}
-					style={StyleSheet.absoluteFill}
+				/>
+			) : (
+				<Video
+					onLoad={onLoad}
 					onError={onError}
-					onPlay={onPlay}
-					onEnd={reset}
-					resizeMode="cover"
+					style={style}
+					muted
+					source={{ uri: video_source_uri }}
+					controls
+					ignoreSilentSwitch="ignore"
 				/>
 			)}
 		</View>
@@ -124,7 +60,8 @@ const SeedPhraseVideo = ({ style }) => {
 };
 
 SeedPhraseVideo.propTypes = {
-	style: PropTypes.object
+	style: PropTypes.object,
+	onClose: PropTypes.func
 };
 
 export default SeedPhraseVideo;
diff --git a/app/components/Views/AccountBackupStep1/__snapshots__/index.test.js.snap b/app/components/Views/AccountBackupStep1/__snapshots__/index.test.js.snap
index 97f41e13132..d034cf424fb 100644
--- a/app/components/Views/AccountBackupStep1/__snapshots__/index.test.js.snap
+++ b/app/components/Views/AccountBackupStep1/__snapshots__/index.test.js.snap
@@ -61,14 +61,16 @@ exports[`AccountBackupStep1 should render correctly 1`] = `
               "fontFamily": "EuclidCircularB-Bold",
               "fontSize": 24,
               "fontWeight": "600",
-              "marginBottom": 40,
+              "marginBottom": 24,
               "textAlign": "center",
             }
           }
         >
           Secure your wallet
         </Text>
-        <SeedPhraseVideo />
+        <SeedPhraseVideo
+          onClose={[Function]}
+        />
         <View
           style={
             Object {
diff --git a/app/components/Views/AccountBackupStep1/index.js b/app/components/Views/AccountBackupStep1/index.js
index da71f756c23..2979c1ac39a 100644
--- a/app/components/Views/AccountBackupStep1/index.js
+++ b/app/components/Views/AccountBackupStep1/index.js
@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		fontSize: 24,
-		marginBottom: 40,
+		marginBottom: 24,
 		color: colors.fontPrimary,
 		textAlign: 'center',
 		...fontStyles.bold
@@ -181,7 +181,7 @@ const AccountBackupStep1 = props => {
 					<OnboardingProgress steps={CHOOSE_PASSWORD_STEPS} currentStep={1} />
 					<View style={styles.content}>
 						<Text style={styles.title}>{strings('account_backup_step_1.title')}</Text>
-						<SeedPhraseVideo />
+						<SeedPhraseVideo onClose={skip} />
 						<View style={styles.text}>
 							<Text style={styles.label}>
 								{strings('account_backup_step_1.info_text_1_1')}{' '}
diff --git a/app/components/Views/MediaPlayer/index.js b/app/components/Views/MediaPlayer/index.js
index 5b7b68a2a9a..a8a089e3927 100644
--- a/app/components/Views/MediaPlayer/index.js
+++ b/app/components/Views/MediaPlayer/index.js
@@ -10,7 +10,8 @@ const styles = StyleSheet.create({
 	loaderContainer: {
 		position: 'absolute',
 		zIndex: 999,
-		width: '100%'
+		width: '100%',
+		height: '100%'
 	}
 });
 
diff --git a/app/components/Views/Settings/SecuritySettings/__snapshots__/index.test.js.snap b/app/components/Views/Settings/SecuritySettings/__snapshots__/index.test.js.snap
index 9bcc47bdff7..d36cd60f6dc 100644
--- a/app/components/Views/Settings/SecuritySettings/__snapshots__/index.test.js.snap
+++ b/app/components/Views/Settings/SecuritySettings/__snapshots__/index.test.js.snap
@@ -38,37 +38,43 @@ exports[`SecuritySettings should render correctly 1`] = `
     >
       <Text
         style={
-          Object {
-            "color": "#000000",
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 20,
-            "fontWeight": "400",
-            "lineHeight": 20,
-          }
-        }
-      >
-        <WarningIcon />
-         
-        <Text
-          style={
+          Array [
             Object {
               "color": "#000000",
               "fontFamily": "EuclidCircularB-Regular",
               "fontSize": 20,
               "fontWeight": "400",
               "lineHeight": 20,
-            }
+            },
+            Object {
+              "marginBottom": 10,
+            },
+          ]
+        }
+      >
+        <WarningIcon />
+         
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "EuclidCircularB-Regular",
+                "fontSize": 20,
+                "fontWeight": "400",
+                "lineHeight": 20,
+              },
+              Object {
+                "marginBottom": 10,
+              },
+            ]
           }
         >
           Protect your wallet
         </Text>
       </Text>
       <SeedPhraseVideo
-        style={
-          Object {
-            "marginTop": 10,
-          }
-        }
+        onClose={[Function]}
       />
       <Text
         style={
diff --git a/app/components/Views/Settings/SecuritySettings/index.js b/app/components/Views/Settings/SecuritySettings/index.js
index 00989667ad4..4476c8833de 100644
--- a/app/components/Views/Settings/SecuritySettings/index.js
+++ b/app/components/Views/Settings/SecuritySettings/index.js
@@ -61,6 +61,9 @@ const styles = StyleSheet.create({
 		fontSize: 20,
 		lineHeight: 20
 	},
+	bump: {
+		marginBottom: 10
+	},
 	heading: {
 		fontSize: 24,
 		lineHeight: 30,
@@ -142,9 +145,6 @@ const styles = StyleSheet.create({
 	},
 	viewHint: {
 		padding: 5
-	},
-	seedPhraseVideo: {
-		marginTop: 10
 	}
 });
 
@@ -506,6 +506,8 @@ class Settings extends PureComponent {
 		);
 	};
 
+	onBack = () => this.props.navigation.goBack();
+
 	render = () => {
 		const { approvedHosts, seedphraseBackedUp, browserHistory, privacyMode, thirdPartyApiMode } = this.props;
 		const {
@@ -532,15 +534,15 @@ class Settings extends PureComponent {
 				<View style={styles.inner}>
 					<Heading first>{strings('app_settings.security_heading')}</Heading>
 					<View style={[styles.setting, styles.firstSetting]}>
-						<Text style={styles.title}>
+						<Text style={[styles.title, styles.bump]}>
 							{!seedphraseBackedUp ? (
 								<>
 									<WarningIcon />{' '}
 								</>
 							) : null}
-							<Text style={styles.title}>{strings('app_settings.protect_title')}</Text>
+							<Text style={[styles.title, styles.bump]}>{strings('app_settings.protect_title')}</Text>
 						</Text>
-						<SeedPhraseVideo style={styles.seedPhraseVideo} />
+						<SeedPhraseVideo onClose={this.onBack} />
 						<Text style={styles.desc}>{strings('app_settings.protect_desc')}</Text>
 						<SettingsNotification isWarning={!seedphraseBackedUp}>
 							<Text
diff --git a/package.json b/package.json
index a916b194db4..83edd981ad6 100644
--- a/package.json
+++ b/package.json
@@ -186,7 +186,6 @@
     "react-native-v8": "^0.62.2-patch.1",
     "react-native-vector-icons": "6.4.2",
     "react-native-video": "^5.1.1",
-    "react-native-video-controls": "^2.7.1",
     "react-native-view-shot": "^3.1.2",
     "react-native-webview": "^11.0.2",
     "react-navigation": "^4.4.3",
diff --git a/yarn.lock b/yarn.lock
index fa17faa3587..272116e0ba5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8760,7 +8760,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash@^4.0.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
+lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -11254,13 +11254,6 @@ react-native-vector-icons@6.4.2:
     prop-types "^15.6.2"
     yargs "^13.2.2"
 
-react-native-video-controls@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/react-native-video-controls/-/react-native-video-controls-2.7.1.tgz#52bd22ea83a964c9bf1e741e7ed6380ad0e28f1e"
-  integrity sha512-yoquLUx2x7EJOnDNGw0H4bb0gO4Io+ziFSDoDGGJqaT15IaXIiD+GCvCDbW9gLcUxsyLDwCr65sx8Yt2ZMvbCg==
-  dependencies:
-    lodash "^4.16.4"
-
 react-native-video@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.1.1.tgz#89a7989efeb8d404611c06154d1da227a745d7d8"