Fixed slider and youtube video embed

_includes/video.liquid

@@ -15,7 +15,7 @@
       {% if include.height %}
         height="{{ include.height }}"
       {% else %}
-        height="200%"
+        height="auto"
       {% endif %}
       {% if include['min-width'] %}
         min-width="{{ include.min-width }}"
@@ -53,6 +53,7 @@
     />
 
   {% else %}
+  <div class="video-container">
     <iframe
       src="{{ include.path }}"
       {% if include.class %}
@@ -69,7 +70,7 @@
       {% if include.height %}
         height="{{ include.height }}"
       {% else %}
-        height="200%"
+        height="auto"
       {% endif %}
       {% if include['min-width'] %}
         min-width="{{ include.min-width }}"
@@ -90,6 +91,7 @@
         title="{{ include.title }}"
       {% endif %}
     />
+    </div>
   {% endif %}
   {% if include.caption %}
     <figcaption class="caption">{{ include.caption }}</figcaption>

_projects/human-robotix.md

@@ -6,6 +6,8 @@ img: assets/img/projects/hrx/hrx-1.png
 importance: 3
 category: Current
 collabarators: ["Professor Etienne Burdet, Imperial College London", "Professor Aaron Yurkewich, Ontario Technical University", "Dr Ildar Farkhatdinov, University of London"]
+images:
+  slider: true
 ---
 
 In 2011, the Human Robotics Group at Imperial College London designed and built Hi5 - a high performance torque feedback interface for the wrist which has been used in studies ranging from human motor control to haptic sensations and even physical treatments for neurodegenerative disorders like Parkinson's disease. In 2020, I returned to Imperial College tasked with taking the full sized robot and producing a portable, commercialisable version.
@@ -27,6 +29,8 @@ The result - the HRX-1 - is a fully portable reimagining of the original robot.
     <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/boilerplate.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
     <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/demo.jpeg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
     <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/mint.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/endstops.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+    <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/projects/hrx/handle-cnc.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
 </swiper-container>
 
 The robot is now being sold through a start-up - Human Robotix Ltd. Based out of my garage in South-East London, each robot is proudly built in Britain. The robots are already being used in universities in Europe and North America with hopefully more to come.

_projects/teleoperation.md

@@ -14,7 +14,9 @@ Towards the end of my PhD, I was able to visit York University in Canada to cond
 
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-         {% include video.liquid path="https://www.youtube.com/embed/w6L7Tt3TXJQ?si=84AtMMp7kMtTnApE" class="img-fluid rounded z-depth-1" %}
+        <div class="video-container">
+            {% include video.liquid path="https://www.youtube.com/embed/w6L7Tt3TXJQ?si=84AtMMp7kMtTnApE" class="img-fluid rounded z-depth-1" %}
+         </div>
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
         {% include figure.liquid path="assets/img/projects/teleoperation/blueROV.jpg" title="The BlueROV2" class="img-fluid rounded z-depth-1" %}

_sass/_base.scss

@@ -1135,3 +1135,19 @@ swiper-container {
   --swiper-pagination-color: var(--global-theme-color);
   --swiper-pagination-bullet-inactive-color: var(--global-text-color);
 }
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  padding-top: 0px; /* Adjust for controls */
+  height: 0;
+  overflow: hidden;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}