diff --git a/erpnext/public/js/education/lms/components/Video.vue b/erpnext/public/js/education/lms/components/Video.vue
index 3cfca05f3d0..b7928cee62e 100644
--- a/erpnext/public/js/education/lms/components/Video.vue
+++ b/erpnext/public/js/education/lms/components/Video.vue
@@ -3,7 +3,7 @@
     <section class='video-top-section video-section-bg'>
     <div>
         <div class="embed-responsive embed-responsive-16by9">
-            <iframe class="embed-responsive-item" :src="'https://www.youtube.com/embed/' + contentData.url" allowfullscreen></iframe>
+            <iframe class="embed-responsive-item" :src="'https://www.youtube.com/embed/' + videoID" allowfullscreen></iframe>
         </div>
         <div class="mt-3 row">
             <div class="col-md-8">
@@ -42,11 +42,14 @@ export default {
 	name: 'Video',
 	data() {
     	return {
-    		contentData: ''
+            contentData: '',
+            videoID: '',
     	}
     },
     mounted() {
-    	this.getContent().then(data => this.contentData = data);
+        this.getContent()
+            .then(data => this.contentData = data)
+            .then((contentData) => this.videoID = this.getVideoID(this.contentData.url))
     },
     methods: {
         getContent() {
@@ -54,6 +57,19 @@ export default {
                 type: this.type,
                 content: this.content
             })
+        },
+        getVideoID(link) {
+            if (!Array.prototype.last){
+                Array.prototype.last = function(){
+                    return this[this.length - 1];
+                };
+            };
+            if (link.includes('v=')){
+                return link.split('v=')[1].split('&')[0]
+            }
+            else if (link.includes('youtu.be')) {
+                return link.split('/').last().split('?')[0]
+            }
         }
     }
 };
diff --git a/erpnext/public/js/education/lms/pages/ContentPage.vue b/erpnext/public/js/education/lms/pages/ContentPage.vue
index 37f1b45e7f7..224ee03a4ad 100644
--- a/erpnext/public/js/education/lms/pages/ContentPage.vue
+++ b/erpnext/public/js/education/lms/pages/ContentPage.vue
@@ -64,11 +64,6 @@ export default {
 	display: none;
 }
 
-.video-top-section {
-	padding-top: 3rem !important;
-	padding-bottom: 1rem !important;
-}
-
 .video-description-section {
 	padding-top: 0em !important;
 }
diff --git a/erpnext/www/lms.py b/erpnext/www/lms.py
index b91dcc97ab7..702377e5015 100644
--- a/erpnext/www/lms.py
+++ b/erpnext/www/lms.py
@@ -77,7 +77,6 @@ def get_next_content(current_content, current_content_type, topic):
 	content_list = [{'content_type':item.doctype, 'content':item.name} for item in topic.get_contents()]
 	current_index = content_list.index({'content': current_content, 'content_type': current_content_type})
 	try:
-		# print(content_list[current_index + 1])
 		return content_list[current_index + 1]
 	except IndexError:
 		return None