diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index bbd34e7f59f..7d4948c72ee 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -56,6 +56,19 @@
 						@switchScreenToId="_switchScreenToId" />
 				</template>
 			</div>
+			<!-- Local Video Override mode -->
+			<div v-if="showLocalVideo" ref="videoContainer" class="video__promoted override">
+				<LocalVideo
+					ref="localVideo"
+					:fit-video="true"
+					:is-stripe="false"
+					:is-big="true"
+					:local-media-model="localMediaModel"
+					:video-container-aspect-ratio="videoContainerAspectRatio"
+					:local-call-participant-model="localCallParticipantModel"
+					:is-sidebar="false"
+					@switchScreenToId="1" />
+			</div>
 			<!-- Screens -->
 			<div v-if="!isSidebar && (showLocalScreen || showRemoteScreen)" id="screens">
 				<!-- local screen -->
@@ -88,7 +101,8 @@
 				:local-media-model="localMediaModel"
 				:local-call-participant-model="localCallParticipantModel"
 				:shared-datas="sharedDatas"
-				@select-video="handleSelectVideo" />
+				@select-video="handleSelectVideo"
+				@click-local-video="handleClickLocalVideo" />
 			<!-- Local video if the conversation is 1to1 or if sidebar -->
 			<LocalVideo
 				v-if="isOneToOneView"
@@ -183,6 +197,18 @@ export default {
 			return this.$store.getters.isGrid
 		},
 
+		showGrid() {
+			return (!this.isOneToOneView || this.showLocalScreen) && !this.isSidebar
+		},
+
+		gridTargetAspectRatio() {
+			if (this.isStripe) {
+				return 1
+			} else {
+				return 1.5
+			}
+		},
+
 		selectedVideoPeerId() {
 			return this.$store.getters.selectedVideoPeerId
 		},
@@ -199,33 +225,43 @@ export default {
 			return (this.isOneToOne && !this.isGrid) || this.isSidebar
 		},
 
-		showGrid() {
-			return (!this.isOneToOneView || this.showLocalScreen) && !this.isSidebar
+		hasLocalVideo() {
+			return this.localMediaModel.attributes.videoEnabled
 		},
 
 		hasLocalScreen() {
-			return this.localMediaModel.attributes.localScreen
+			return !!this.localMediaModel.attributes.localScreen
 		},
 
 		hasRemoteScreen() {
 			return this.callParticipantModelsWithScreen.length > 0
 		},
+		// The following conditions determine what to show in the "Big container"
+		// of the promoted view
 
-		showSelected() {
-			return !this.isGrid && this.hasSelectedVideo && !this.showLocalScreen && !this.showRemoteScreen
+		// Show local screen (has priority over anything else when screensharing)
+		showLocalScreen() {
+			return this.screens.filter(screen => screen === localCallParticipantModel.attributes.peerId).length === 1
 		},
 
-		showPromoted() {
-			return !this.isGrid && !this.hasSelectedVideo && !this.screenSharingActive
+		// Shows the local video if selected
+		showLocalVideo() {
+			return this.hasLocalVideo && this.$store.getters.selectedVideoPeerId === 'local'
 		},
 
-		showLocalScreen() {
-			return this.screens.filter(screen => screen === localCallParticipantModel.attributes.peerId).length === 1
+		// Show selected video (other than local)
+		showSelected() {
+			return !this.isGrid && this.hasSelectedVideo && !this.showLocalScreen && !this.showLocalVideo
+		},
 
+		// Show the current automatically promoted video
+		showPromoted() {
+			return !this.isGrid && !this.hasSelectedVideo && !this.screenSharingActive && !this.showLocalVideo
 		},
 
+		// Show somebody else's screen
 		showRemoteScreen() {
-			return this.shownRemoteScreenPeerId !== null
+			return this.shownRemoteScreenPeerId !== null && !this.showLocalVideo
 		},
 
 		shownRemoteScreenPeerId() {
@@ -251,14 +287,6 @@ export default {
 
 			return null
 		},
-
-		gridTargetAspectRatio() {
-			if (this.isStripe) {
-				return 1
-			} else {
-				return 1.5
-			}
-		},
 	},
 	watch: {
 		localScreen: function(localScreen) {
@@ -295,6 +323,13 @@ export default {
 				this.$store.dispatch('isGrid', false)
 			}
 		},
+		'hasLocalVideo': function(newValue) {
+			if (this.$store.getters.selectedVideoPeerId === 'local') {
+				if (!newValue) {
+					this.$store.dispatch('selectedVideoPeerId', null)
+				}
+			}
+		},
 
 	},
 	created() {
@@ -456,6 +491,12 @@ export default {
 		handleSelectVideo(peerId) {
 			this.$store.dispatch('isGrid', false)
 			this.$store.dispatch('selectedVideoPeerId', peerId)
+			this.isLocalVideoSelected = false
+		},
+		handleClickLocalVideo() {
+			// Deselect possible selected video
+			this.$store.dispatch('selectedVideoPeerId', 'local')
+			this.$store.dispatch('isGrid', false)
 		},
 	},
 }
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 50d4bd4708d..f593f510d82 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -62,7 +62,8 @@
 						:local-media-model="localMediaModel"
 						:video-container-aspect-ratio="videoContainerAspectRatio"
 						:local-call-participant-model="localCallParticipantModel"
-						@switchScreenToId="1" />
+						@switchScreenToId="1"
+						@click-video="handleClickLocalVideo" />
 				</template>
 				<!-- Grid developer mode -->
 				<template v-else>
@@ -91,7 +92,8 @@
 			:local-media-model="localMediaModel"
 			:video-container-aspect-ratio="videoContainerAspectRatio"
 			:local-call-participant-model="localCallParticipantModel"
-			@switchScreenToId="1" />
+			@switchScreenToId="1"
+			@click-video="handleClickLocalVideo" />
 		<!-- page indicator (disabled) -->
 		<div
 			v-if="numberOfPages !== 0 && hasPagination && false"
@@ -213,6 +215,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		isLocalVideoSelectable: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -632,9 +638,15 @@ export default {
 			console.debug('selected-video peer id', peerId)
 			this.$emit('select-video', peerId)
 		},
+
+		handleClickLocalVideo() {
+			this.$emit('click-local-video')
+		},
+
 		isSelected(callParticipantModel) {
 			return callParticipantModel.attributes.peerId === this.$store.getters.selectedVideoPeerId
 		},
+
 	},
 }
 
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index 5b801b81d13..f79133d74ff 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -19,66 +19,76 @@
   -->
 
 <template>
-	<div class="nameIndicator">
-		<div id="muteWrapper">
+	<div>
+		<div v-if="!isBig" class="nameIndicator">
+			<div id="muteWrapper">
+				<button
+					id="mute"
+					v-shortkey="['m']"
+					v-tooltip="audioButtonTooltip"
+					:aria-label="audioButtonAriaLabel"
+					:class="audioButtonClass"
+					class="forced-white"
+					@shortkey="toggleAudio"
+					@click="toggleAudio" />
+				<span v-show="model.attributes.audioAvailable"
+					ref="volumeIndicator"
+					class="volume-indicator"
+					:style="{ 'height': currentVolumeIndicatorHeight + 'px' }" />
+			</div>
 			<button
-				id="mute"
-				v-shortkey="['m']"
-				v-tooltip="audioButtonTooltip"
-				:aria-label="audioButtonAriaLabel"
-				:class="audioButtonClass"
+				id="hideVideo"
+				v-shortkey="['v']"
+				v-tooltip="videoButtonTooltip"
+				:aria-label="videoButtonAriaLabel"
+				:class="videoButtonClass"
 				class="forced-white"
-				@shortkey="toggleAudio"
-				@click="toggleAudio" />
-			<span v-show="model.attributes.audioAvailable"
-				ref="volumeIndicator"
-				class="volume-indicator"
-				:style="{ 'height': currentVolumeIndicatorHeight + 'px' }" />
+				@shortkey="toggleVideo"
+				@click="toggleVideo" />
+			<button
+				v-if="!screenSharingButtonHidden"
+				id="screensharing-button"
+				v-tooltip="screenSharingButtonTooltip"
+				:aria-label="screenSharingButtonAriaLabel"
+				:class="screenSharingButtonClass"
+				class="app-navigation-entry-utils-menu-button forced-white"
+				@click="toggleScreenSharingMenu" />
+			<div id="screensharing-menu" :class="{ open: screenSharingMenuOpen }" class="app-navigation-entry-menu">
+				<ul>
+					<li v-if="!model.attributes.localScreen && splitScreenSharingMenu" id="share-screen-entry">
+						<button id="share-screen-button" @click="shareScreen">
+							<span class="icon-screen" />
+							<span>{{ t('spreed', 'Share whole screen') }}</span>
+						</button>
+					</li>
+					<li v-if="!model.attributes.localScreen && splitScreenSharingMenu" id="share-window-entry">
+						<button id="share-window-button" @click="shareWindow">
+							<span class="icon-share-window" />
+							<span>{{ t('spreed', 'Share a single window') }}</span>
+						</button>
+					</li>
+					<li v-if="model.attributes.localScreen" id="show-screen-entry">
+						<button id="show-screen-button" @click="showScreen">
+							<span class="icon-screen" />
+							<span>{{ t('spreed', 'Show your screen') }}</span>
+						</button>
+					</li>
+					<li v-if="model.attributes.localScreen" id="stop-screen-entry">
+						<button id="stop-screen-button" @click="stopScreen">
+							<span class="icon-screen-off" />
+							<span>{{ t('spreed', 'Stop screensharing') }}</span>
+						</button>
+					</li>
+				</ul>
+			</div>
 		</div>
-		<button
-			id="hideVideo"
-			v-shortkey="['v']"
-			v-tooltip="videoButtonTooltip"
-			:aria-label="videoButtonAriaLabel"
-			:class="videoButtonClass"
-			class="forced-white"
-			@shortkey="toggleVideo"
-			@click="toggleVideo" />
-		<button
-			v-if="!screenSharingButtonHidden"
-			id="screensharing-button"
-			v-tooltip="screenSharingButtonTooltip"
-			:aria-label="screenSharingButtonAriaLabel"
-			:class="screenSharingButtonClass"
-			class="app-navigation-entry-utils-menu-button forced-white"
-			@click="toggleScreenSharingMenu" />
-		<div id="screensharing-menu" :class="{ open: screenSharingMenuOpen }" class="app-navigation-entry-menu">
-			<ul>
-				<li v-if="!model.attributes.localScreen && splitScreenSharingMenu" id="share-screen-entry">
-					<button id="share-screen-button" @click="shareScreen">
-						<span class="icon-screen" />
-						<span>{{ t('spreed', 'Share whole screen') }}</span>
-					</button>
-				</li>
-				<li v-if="!model.attributes.localScreen && splitScreenSharingMenu" id="share-window-entry">
-					<button id="share-window-button" @click="shareWindow">
-						<span class="icon-share-window" />
-						<span>{{ t('spreed', 'Share a single window') }}</span>
-					</button>
-				</li>
-				<li v-if="model.attributes.localScreen" id="show-screen-entry">
-					<button id="show-screen-button" @click="showScreen">
-						<span class="icon-screen" />
-						<span>{{ t('spreed', 'Show your screen') }}</span>
-					</button>
-				</li>
-				<li v-if="model.attributes.localScreen" id="stop-screen-entry">
-					<button id="stop-screen-button" @click="stopScreen">
-						<span class="icon-screen-off" />
-						<span>{{ t('spreed', 'Stop screensharing') }}</span>
-					</button>
-				</li>
-			</ul>
+		<div class="bottom-bar">
+			<button
+				v-if="isBig"
+				class="bottom-bar__button"
+				@click="handleStopFollowing">
+				{{ stopFollowingLabel }}
+			</button>
 		</div>
 		<div class="network-connection-state">
 			<Popover
@@ -158,6 +168,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		isBig: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -302,6 +316,10 @@ export default {
 			return this.qualityWarningTooltip && (!this.isQualityWarningTooltipDismissed || this.mouseover)
 		},
 
+		stopFollowingLabel() {
+			return t('spreed', 'Back')
+		},
+
 	},
 
 	created() {
@@ -438,6 +456,7 @@ export default {
 				}
 			})
 		},
+
 		executeQualityWarningTooltipAction() {
 			if (this.qualityWarningTooltip.action === '') {
 				return
@@ -450,6 +469,10 @@ export default {
 				this.isQualityWarningTooltipDismissed = true
 			}
 		},
+
+		handleStopFollowing() {
+			this.$store.dispatch('selectedVideoPeerId', null)
+		},
 	},
 }
 </script>
@@ -479,6 +502,7 @@ export default {
 	position: absolute;
 	right: 20px;
 	bottom: 12px;
+	z-index: 1;
 }
 
 .nameIndicator button {
@@ -569,4 +593,29 @@ export default {
 		padding-top:4px;
 	}
 }
+
+.bottom-bar {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	padding: 0 20px 12px 24px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 40px;
+	&--big {
+		justify-content: center;
+		height: 48px;
+	}
+	&__button {
+		opacity: 0.8;
+		margin-left: 4px;
+		border: none;
+		&:hover,
+		&:focus {
+			opacity: 1;
+			border: none;
+		}
+	}
+}
 </style>
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 17dac3c51ef..d03fa66c0c1 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -21,7 +21,10 @@
 <template>
 	<div id="localVideoContainer"
 		class="videoContainer videoView"
-		:class="videoContainerClass">
+		:class="videoContainerClass"
+		@mouseover="showShadow"
+		@mouseleave="hideShadow"
+		@click="handleClickVideo">
 		<video v-show="localMediaModel.attributes.videoEnabled"
 			id="localVideo"
 			ref="video"
@@ -47,6 +50,7 @@
 		<transition name="fade">
 			<LocalMediaControls
 				ref="localMediaControls"
+				:is-big="isBig"
 				:model="localMediaModel"
 				:local-call-participant-model="localCallParticipantModel"
 				:screen-sharing-button-hidden="isSidebar"
@@ -54,6 +58,7 @@
 				:quality-warning-tooltip="qualityWarningTooltip"
 				@switchScreenToId="$emit('switchScreenToId', $event)" />
 		</transition>
+		<div v-if="mouseover && isSelectable" class="hover-shadow" />
 	</div>
 </template>
 
@@ -118,6 +123,7 @@ export default {
 				'speaking': this.localMediaModel.attributes.speaking,
 				'video-container-grid': this.isGrid,
 				'video-container-stripe': this.isStripe,
+				'video-container-big': this.isBig,
 			}
 		},
 
@@ -244,6 +250,18 @@ export default {
 
 			return tooltip
 		},
+
+		hasLocalVideo() {
+			return this.localMediaModel.attributes.videoEnabled
+		},
+
+		isSelected() {
+			return this.$store.getters.selectedVideoPeerId === 'local'
+		},
+
+		isSelectable() {
+			return this.hasLocalVideo && this.$store.getters.selectedVideoPeerId !== 'local'
+		},
 	},
 
 	watch: {
@@ -379,4 +397,19 @@ export default {
 	margin: auto;
 }
 
+.video-container-big {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+}
+
+.hover-shadow {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+	box-shadow: inset 0 0 0 3px white;
+	cursor: pointer;
+}
 </style>
diff --git a/src/components/CallView/shared/Video.vue b/src/components/CallView/shared/Video.vue
index 1467d9b758b..e6ad2d8f923 100644
--- a/src/components/CallView/shared/Video.vue
+++ b/src/components/CallView/shared/Video.vue
@@ -139,12 +139,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		// True when this component is used in the big video slot in the
-		// promoted view
-		isBig: {
-			type: Boolean,
-			default: false,
-		},
 		// True when this component is used as main video in the sidebar
 		isSidebar: {
 			type: Boolean,
@@ -157,12 +151,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			mouseover: false,
-		}
-	},
-
 	computed: {
 
 		isSelectable() {
@@ -362,20 +350,6 @@ export default {
 				this.$refs.video.style.transform = ''
 			}
 		},
-		showShadow() {
-			if (this.isSelectable) {
-				this.mouseover = true
-			}
-		},
-		hideShadow() {
-			if (this.isSelectable) {
-				this.mouseover = false
-			}
-		},
-
-		handleClickVideo() {
-			this.$emit('click-video')
-		},
 	},
 
 }
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 50274211565..4cfe00a2869 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -228,6 +228,7 @@ export default {
 	justify-content: space-between;
 	align-items: center;
 	height: 40px;
+	z-index: 1;
 	&--big {
 		justify-content: center;
 		height: 48px;
diff --git a/src/mixins/video.js b/src/mixins/video.js
index 9a29407d80a..80824f0cec0 100644
--- a/src/mixins/video.js
+++ b/src/mixins/video.js
@@ -25,6 +25,7 @@ const video = {
 	data() {
 		return {
 			incomingStreamAspectRatio: null,
+			mouseover: false,
 		}
 	},
 	props: {
@@ -43,6 +44,33 @@ const video = {
 			type: Boolean,
 			default: false,
 		},
+		// True when this component is used in the big video slot in the
+		// promoted view
+		isBig: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	methods: {
+		showShadow() {
+			if (this.isSelectable || this.mouseover) {
+				this.mouseover = true
+			}
+		},
+		hideShadow() {
+			if (this.isSelectable || this.mouseover) {
+				this.mouseover = false
+			}
+		},
+
+		handleClickVideo(e) {
+			// Prevent clicks on the media controls buttons to trigger a video selection
+			if (e.target.localName === 'button') {
+				return
+			}
+			this.$emit('click-video')
+		},
 	},
 
 	computed: {