diff --git a/erpnext/public/js/education/lms/components/YoutubePlayer.vue b/erpnext/public/js/education/lms/components/YoutubePlayer.vue
new file mode 100644
index 0000000000..e5ab6955e4
--- /dev/null
+++ b/erpnext/public/js/education/lms/components/YoutubePlayer.vue
@@ -0,0 +1,26 @@
+<template>
+	<div class="embed-responsive embed-responsive-16by9">
+        <iframe class="embed-responsive-item yvideo" :src="'https://www.youtube.com/embed/' + videoID + '?version=3&enablejsapi=1'" allowfullscreen></iframe>
+    </div>
+</template>
+<script type="text/javascript">
+	export default {
+		name: 'YoutubePlayer',
+		props: ['url', 'allowfullscreen'],
+		computed: {
+			videoID() {
+				if (!Array.prototype.last){
+					Array.prototype.last = function(){
+						return this[this.length - 1];
+					};
+				};
+				if (this.url.includes('v=')){
+					return this.url.split('v=')[1].split('&')[0]
+				}
+				else if (this.url.includes('youtu.be')) {
+					return this.url.split('/').last().split('?')[0]
+				}
+		    }
+		}
+	};
+</script>
\ No newline at end of file