diff --git a/.gitmodules b/.gitmodules
index db81731..e3b0280 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -4,3 +4,6 @@
 [submodule "submodules/spyc"]
 	path = submodules/spyc
 	url = https://github.com/mustangostang/spyc.git
+[submodule "submodules/lite-youtube-embed"]
+	path = submodules/lite-youtube-embed
+	url = https://github.com/paulirish/lite-youtube-embed.git
diff --git a/DieJudoGürtelprüfung/kyu.php b/DieJudoGürtelprüfung/kyu.php
index 96f62e9..9510474 100644
--- a/DieJudoGürtelprüfung/kyu.php
+++ b/DieJudoGürtelprüfung/kyu.php
@@ -35,47 +35,39 @@ function getCurPagesUrl(){
 return $pageURL;
 }
 
-function youtubeFrame($ytUrl, $from=NULL, $to=NULL){
-	// return "<iframe "
-	// 	."src=\"".$ytUrl."\""
-	// 	.(!empty($from)?("start=\"".$from."\""):"")
-	// 	.(!empty($to)?("end=\"".$to."\""):"")
-	// ."></iframe>";
-	return "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/TE992jTbkek\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>";
-}
 function htmlCardCode($article, $Parsedown){
 	if(
 		empty($article['yaml'])
 		&& empty($article['mdText'])
 	) return "";
+	$videoFrame = (
+		array_key_exists('yaml', $article)
+		?(
+			array_key_exists('video', $article['yaml'])
+			?(
+				"<div style=\"text-align: center;width=100%;height=auto;\">".html5VideoFrame($article['yaml']['video'])."</div>"
+			)
+			:""
+		)
+		:""
+	);
+	$ytVideoFrame = (
+		array_key_exists('yaml', $article)
+		?(
+			array_key_exists('youtube', $article['yaml'])
+			?(
+				ytLightEmbed($article['yaml']['youtube'])
+			)
+			:""
+		)
+		:""
+	);
 return
 	"<div class=\"col s12 m6\">"
 		."<div class=\"card blue-grey darken-1\">"
 			."<div class=\"card-image\">"
-				.(
-					array_key_exists('yaml', $article)
-					?(
-						array_key_exists('video', $article['yaml'])
-						?(
-							"<video "
-								."style=\"max-width:100%;height: auto;\""
-								." class=\"materialboxed\""
-								." src=\"".$article['yaml']['video']['url']."\""
-								." width=\"".$article['yaml']['video']['width']."\""
-								." height=\"".$article['yaml']['video']['height']."\""
-								." controls"
-							."></video>"
-						)
-						:""
-					)
-					:""
-				)
+				.(!empty($videoFrame)?$videoFrame:$ytVideoFrame)
 			."</div>"
-			.(
-				array_key_exists( 'youtube', $article['yaml'])
-				?("<div class=\"materialboxed\">".youtubeFrame($article['yaml']['youtube']['url'])."</div>")
-				:""
-			)
 			."<div class=\"card-content white-text\">"
 				."<span class=\"card-title activator\">"
 					.$article['yaml']['title']
@@ -92,6 +84,51 @@ return
 		."</div>"
 	."</div>";
 }
+
+//! create the <video>Tag for videoJs
+function videoJsFrame($item){
+	return "<video "
+		."id=\"".str_replace("/", "-", $item['url'])."\" "
+		."class=\"video-js\" "
+		."controls "
+		."preload=\"auto\" "
+		// ."poster=\"//vjs.zencdn.net/v/oceans.png\""
+		."data-setup='{}' "
+	.">"
+		."<source src=\"".$item['url']."\" type=\"video/webm\">"//</source>"
+		."<p class=\"vjs-no-js\">"
+			."To view this video please enable JavaScript, and consider upgrading to a web browser that "
+			."<a href=\"https://videojs.com/html5-video-support/\" target=\"_blank\">"
+				."supports HTML5 video"
+			."</a>"
+		."</p>"
+	."</video>";
+}
+
+function html5VideoFrame($item){
+	return "<video "
+		."style=\"max-width:100%;height: auto;\""
+		." src=\"".$item['url']."\""
+		." width=\"".$item['width']."\""
+		." height=\"".$item['height']."\""
+		." controls"
+	."></video>";
+}
+
+//! embed youtube
+function ytLightEmbed($item){
+	return "<lite-youtube "
+		."videoid=\"".$item['videoid']."\" "
+		// ."playlabel=\"".$title."\""
+		."params=\""
+			."start=".$item['from']
+			."&end=".$item['to']
+			."&modestbranding=1"
+			."&playsinline=0"
+			."&loop=1"
+		."\" "
+	."></lite-youtube>";
+}
 ?>
 <!DOCTYPE html>
 <html lang="de">
@@ -105,12 +142,19 @@ return
 		<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/js/materialize.min.js"></script>
 		<!--Import Google Icon Font-->
 		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+		<!-- unpkg : use the latest version of Video.js -->
+		<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
+		<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
+		
+		<!-- Include the CSS & JS.. (This could be direct from the package or bundled) -->
+		<link rel="stylesheet" href="lib/lite-youtube-embed/lite-yt-embed.css" />
+		<script src="lib/lite-youtube-embed/lite-yt-embed.js"></script>
 
 		<!--- AutoInit -->
 		<script>
 			document.addEventListener('DOMContentLoaded', function() {
-				var elems = document.querySelectorAll('.materialboxed');
-				var instances = M.Materialbox.init(elems, {
+				var materialboxElements = document.querySelectorAll('.materialboxed');
+				var materialboxInstances = M.Materialbox.init(materialboxElements, {
 					// specify options here
 				});
 			});
@@ -148,7 +192,7 @@ return
 			<li><a href="kyu.php?kyu=7">7. Kyu - gelb</a></li>
 			<li><a href="kyu.php?kyu=6">6. Kyu - gelb-orange</a></li>
 			<li><a href="kyu.php?kyu=5">5. Kyu - orange</a></li>
-			<li><a href="kyu.php?kyu=4">5. Kyu - orange-grün</a></li>
+			<li><a href="kyu.php?kyu=4">4. Kyu - orange-grün</a></li>
 		</ul>
 		<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
 			<?php
diff --git a/DieJudoGürtelprüfung/lib/lite-youtube-embed b/DieJudoGürtelprüfung/lib/lite-youtube-embed
new file mode 120000
index 0000000..f98fa2d
--- /dev/null
+++ b/DieJudoGürtelprüfung/lib/lite-youtube-embed
@@ -0,0 +1 @@
+../../submodules/lite-youtube-embed/src/
\ No newline at end of file
diff --git a/DieJudoGürtelprüfung/markdown/4terKyu/02-NageWaza-Grundform/01-TsuriKomiGoshi.md b/DieJudoGürtelprüfung/markdown/4terKyu/02-NageWaza-Grundform/01-TsuriKomiGoshi.md
index 0ea1578..9cc5f12 100644
--- a/DieJudoGürtelprüfung/markdown/4terKyu/02-NageWaza-Grundform/01-TsuriKomiGoshi.md
+++ b/DieJudoGürtelprüfung/markdown/4terKyu/02-NageWaza-Grundform/01-TsuriKomiGoshi.md
@@ -1,7 +1,7 @@
 ---
 title: "Tsuri-komi-goshi"
 youtube:
-    url: "https://www.youtube.com/watch?v=TE992jTbkek"
+    videoid: "TE992jTbkek"
     from: 53
     to: 89
 ---
diff --git a/submodules/lite-youtube-embed b/submodules/lite-youtube-embed
new file mode 160000
index 0000000..c19a938
--- /dev/null
+++ b/submodules/lite-youtube-embed
@@ -0,0 +1 @@
+Subproject commit c19a938c3f82993fcd4ed91b80df612bfeae1887
