diff --git a/erpnext/public/js/education/lms/components/ProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
index f7a1617720e..701a03e90cb 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -9,7 +9,7 @@
             <div v-html="program.description"></div>
         </div>
         <div class='text-right p-3'>
-            <button class='btn btn-secondary btn-sm' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
+            <button class='btn btn-secondary btn-sm text-white' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
             <a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
                 {{ buttonName }}
             </a-button>
diff --git a/erpnext/public/js/education/lms/components/VideoModal.vue b/erpnext/public/js/education/lms/components/VideoModal.vue
index d169ccdbef9..514ab81cbbe 100644
--- a/erpnext/public/js/education/lms/components/VideoModal.vue
+++ b/erpnext/public/js/education/lms/components/VideoModal.vue
@@ -1,40 +1,35 @@
 <template>
-  <div class="modal" id="videoModal" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">{{ title }}</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class="embed-responsive embed-responsive-16by9">
-            <iframe class="embed-responsive-item" :src="'https://www.youtube.com/embed/' + videoID"></iframe>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+	<div class="modal" id="videoModal" tabindex="-1" role="dialog">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">{{ title }}</h5>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+				<span id="close_modal" aria-hidden="true" @click="stopVideo()">&times;</span>
+				</button>
+			</div>
+			<div class="modal-body">
+				<youtube-player :url="video" :allowfullscreen="'false'"/>
+			</div>
+			</div>
+		</div>
+	</div>
 </template>
 <script type="text/javascript">
+import YoutubePlayer from './YoutubePlayer.vue'
+
 export default {
-  name: 'VideoModal',
-  props: ['title', 'video'],
-  computed: {
-      videoID() {
-          if (!Array.prototype.last){
-              Array.prototype.last = function(){
-                  return this[this.length - 1];
-              };
-          };
-          if (this.video.includes('v=')){
-              return this.video.split('v=')[1].split('&')[0]
-          }
-          else if (this.video.includes('youtu.be')) {
-              return this.video.split('/').last().split('?')[0]
-          }
-      }
-  }
+	name: 'VideoModal',
+	props: ['title', 'video'],
+	components: {
+		YoutubePlayer
+	},
+	methods: {
+		stopVideo() {
+			$('.yvideo').each(function() {
+  				this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
+			});
+		}
+	}
 };
 </script>
\ No newline at end of file