diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 0a374acb8f..8af5f9b07e 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -6,11 +6,19 @@
 	</div>
 </div>
 <div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else>
+	<video class="video"
+		:src="video.url"
+		:title="video.name"
+		controls
+		@dblclick.prevent="onClick"
+		ref="video"
+		v-if="inlinePlayable" />
 	<a class="thumbnail"
 		:href="video.url"
 		:style="imageStyle"
 		@click.prevent="onClick"
-		:title="video.name">
+		:title="video.name"
+		v-else>
 		%fa:R play-circle%
 	</a>
 </div>
@@ -19,13 +27,15 @@
 <script lang="ts">
 import Vue from 'vue';
 import MkMediaVideoDialog from './media-video-dialog.vue';
-
 export default Vue.extend({
 	props: {
 		video: {
 			type: Object,
 			required: true
 		},
+		inlinePlayable: {
+			default: false
+		},
 		hide: {
 			type: Boolean,
 			default: true
@@ -57,32 +67,32 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .vwxdhznewyashiknzolsoihtlpicqepe
+	.video
+		display block
+		width 100%
+		height 100%
+		border-radius 4px
 	.thumbnail
 		display flex
 		justify-content center
 		align-items center
 		font-size 3.5em
-
 		cursor zoom-in
 		overflow hidden
 		background-position center
 		background-size cover
 		width 100%
 		height 100%
-
 .uofhebxjdgksfmltszlxurtjnjjsvioh
 	display flex
 	justify-content center
 	align-items center
 	background #111
 	color #fff
-
 	> div
 		display table-cell
 		text-align center
 		font-size 12px
-
-		> *
+		> b
 			display block
-
 </style>