From bfddccd3b32d7d2c7abc7698b08e218f94c0e886 Mon Sep 17 00:00:00 2001
From: Maxence Faldor <m.faldor22@imperial.ac.uk>
Date: Fri, 31 May 2024 10:14:48 +0000
Subject: [PATCH] Update website

---
 docs/index.html | 90 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 75 insertions(+), 15 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index beb6dd8..ccc1150 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -264,19 +264,31 @@ <h3 class="title is-4">Humanoid - Jump</h3>
 				<h3 class="title is-4">Humanoid - Angle</h3>
 				<div class="columns is-centered">
 					<div class="column">
-						<iframe src="static/html/humanoid_angle_1.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/humanoid_angle_1.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/humanoid_angle_2.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/one.svg" alt="1">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/humanoid_angle_2.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/humanoid_angle_2.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/humanoid_jump_2.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/two.svg" alt="2">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/humanoid_angle_3.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/humanoid_angle_3.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/humanoid_angle_3.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/three.svg" alt="3">
 						</div>
@@ -292,19 +304,31 @@ <h3 class="title is-4">Humanoid - Angle</h3>
 				<h3 class="title is-4">Humanoid - Feet Contact</h3>
 				<div class="columns is-centered">
 					<div class="column">
-						<iframe src="static/html/humanoid_feet_contact_1.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/humanoid_feet_contact_1.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/humanoid_feet_contact_1.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/one.svg" alt="1">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/humanoid_feet_contact_2.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/humanoid_feet_contact_2.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/humanoid_feet_contact_2.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/two.svg" alt="2">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/humanoid_feet_contact_3.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/humanoid_feet_contact_3.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/humanoid_feet_contact_3.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/three.svg" alt="3">
 						</div>
@@ -320,19 +344,31 @@ <h3 class="title is-4">Humanoid - Feet Contact</h3>
 				<h3 class="title is-4">Walker - Feet Contact</h3>
 				<div class="columns is-centered">
 					<div class="column">
-						<iframe src="static/html/walker2d_feet_contact_1.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/walker2d_feet_contact_1.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/walker2d_feet_contact_1.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/one.svg" alt="1">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/walker2d_feet_contact_2.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/walker2d_feet_contact_2.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/walker2d_feet_contact_2.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/two.svg" alt="2">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/walker2d_feet_contact_3.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/walker2d_feet_contact_3.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/walker2d_feet_contact_3.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/three.svg" alt="3">
 						</div>
@@ -348,19 +384,31 @@ <h3 class="title is-4">Walker - Feet Contact</h3>
 				<h3 class="title is-4">Ant - Feet Contact</h3>
 				<div class="columns is-centered">
 					<div class="column">
-						<iframe src="static/html/ant_feet_contact_1.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/ant_feet_contact_1.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/ant_feet_contact_1.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/one.svg" alt="1">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/ant_feet_contact_2.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/ant_feet_contact_2.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/ant_feet_contact_2.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/two.svg" alt="2">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/ant_feet_contact_3.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/ant_feet_contact_3.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/ant_feet_contact_3.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/three.svg" alt="3">
 						</div>
@@ -376,19 +424,31 @@ <h3 class="title is-4">Ant - Feet Contact</h3>
 				<h3 class="title is-4">Ant - Velocity</h3>
 				<div class="columns is-centered">
 					<div class="column">
-						<iframe src="static/html/ant_velocity_1.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/ant_velocity_1.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/ant_velocity_1.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/one.svg" alt="1">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/ant_velocity_2.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/ant_velocity_2.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/ant_velocity_2.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/two.svg" alt="2">
 						</div>
 					</div>
 					<div class="column">
-						<iframe src="static/html/ant_velocity_3.html" width="100%" height="400px" loading="lazy"></iframe>
+						<a href="static/html/ant_velocity_3.html" target="_blank">
+							<video width="100%" height="400px" autoplay loop>
+								<source src="static/videos/ant_velocity_3.mp4" type="video/mp4">
+							</video>
+						</a>
 						<div class="has-text-centered">
 							<img src="static/images/three.svg" alt="3">
 						</div>