Fix video playback issues by using H.264 codec for video2 and standardizing video elements

docker/showerloop/public/index.html

@@ -14,8 +14,8 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
 <a class=mdl-navigation__link href=/posts/ title=Posts tabindex=0>Posts</a>
 <a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><div class=chocolate-hero-section style=background-image:url(/images/material-bg.webp)><div class=hero-row-group><div class=hero-row><div class="hero-row-item hero-text-info"><h1 class=mdl-typography--display-3>Shower Loop</h1><h2>Open Source - Open Hardware - Ecological - Economical.</h2><p>Real-time filtration, purification, recycling & heat recovery system for showers. Made in Finland, for Earth.</p></div><div class="hero-row-item hero-video"><div class=video-container>
 <a href="/videos/video1.html" class="video-link" title="View full ShowerLoop Introduction video">
-<video id=video-hero-1741619071 controls preload=none width=100% height=auto poster=/static/videos/posters/video1.webp>
+<video id="video-hero-1741619071" controls preload="none" width="100%" height="auto" poster="/static/videos/posters/video1.webp">
-<source src=/static/videos/hls/video1/master.m3u8 type=application/x-mpegurl><source src=/static/videos/video1.mp4 type=video/mp4><p>To view this video please enable JavaScript, and consider upgrading to a
+<source src="/static/videos/video1.mp4" type="video/mp4"><p>To view this video please enable JavaScript, and consider upgrading to a
 web browser that supports HTML5 video</p></video>
 <div class="video-overlay">
   <span class="video-overlay-text">Click to view full video page</span>
@@ -23,8 +23,8 @@ web browser that supports HTML5 video</p></video>
 </a>
 </div></div></div></div></div><div class=cta><div class=cta-row-group><div class=cta-row><div class=cta-row-item><p class="mdl-typography--headline mdl-typography--font-thin">Looking to make a change? Want to support the project?</p><a href=/components class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Check Out our Components</a></div></div></div></div><main><div class=homepage-content><div class=home-introduction><div class=chocolate-container><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class=mdl-typography--display-2>Shower Loop vs Normal Shower</h2><p class=intro-description>90% reduction in water usage and 70-90% in energy reduction for a 10 minute shower with a flow rate of 10 l/min. Savings are dependant on user behaviour and can vary. Use Just one bucket of water for a shower of any length. See the savings section for more information.</p><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Save Water</h3><p>Capture, Filter, Reuse</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Saving Energy</h3><p>By reusing warm water.</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Save The Planet</h3><p>Save Money</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Open Hardware</h3><p>Copy, improve, adapt, share</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Assemble It Yourself</h3><p>With manufactured and off-shell components</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Enjoy Better Showers</h3><p>The single pump provides stable water pressure and the thermostat and heater keep water nice and warm</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Off - Grid Ready</h3><p>The entire system can run on a 12V DC</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>No Plumber Needed</h3><p>Shower Loop is like a standalone appliance without connecting to water mains</p></div></div></div></div></div></div></div><div class=home-works><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class="mdl-typography--display-2 section-title">How It Works</h2><p class=intro-description>Showers are great, but pouring hot and almost drinkable water down the drain is not. Besides the obvious costs to the environment and your bills, there is also a conscious on unconscious psychological cost any time you create waste. To solve this problem we created Showerloop. It's a shower that collects, cleans and reuses the water in real time while you are showering. So now you can shower for as long as you like but with a reduced ecological impact.</p><div class="mdl-grid videos" style=justify-content:center><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=video-container>
 <a href="/videos/video2.html" class="video-link" title="View full How ShowerLoop Works video">
-<video id=video2 controls preload=auto width=100% height=auto poster=/static/videos/posters/video2.webp>
+<video id="video2" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video2.webp">
-<source src=/static/videos/hls/video2/master.m3u8 type=application/x-mpegurl><source src=/static/videos/video2.mp4 type=video/mp4><p>To view this video please enable JavaScript, and consider upgrading to a
+<source src="/static/videos/video2_h264.mp4" type="video/mp4"><p>To view this video please enable JavaScript, and consider upgrading to a
 web browser that supports HTML5 video</p></video>
 <div class="video-overlay">
   <span class="video-overlay-text">Click to view full video page</span>
@@ -32,8 +32,8 @@ web browser that supports HTML5 video</p></video>
 </a>
 </div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=video-container>
 <a href="/videos/video3.html" class="video-link" title="View full ShowerLoop Installation Guide video">
-<video id=video3 controls preload=auto width=100% height=auto poster=/static/videos/posters/video3.webp>
+<video id="video3" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video3.webp">
-<source src=/static/videos/hls/video3/master.m3u8 type=application/x-mpegurl><source src=/static/videos/video3.mp4 type=video/mp4><p>To view this video please enable JavaScript, and consider upgrading to a
+<source src="/static/videos/video3.mp4" type="video/mp4"><p>To view this video please enable JavaScript, and consider upgrading to a
 web browser that supports HTML5 video</p></video>
 <div class="video-overlay">
   <span class="video-overlay-text">Click to view full video page</span>

docker/showerloop/public/static/css/custom-video.css

@@ -2,27 +2,34 @@
 .video-container {
   position: relative;
   width: 100%;
-  /* Add some bottom padding to ensure controls are visible */
+  margin-bottom: 20px;
-  margin-bottom: 10px;
   overflow: hidden;
+  min-height: 300px; /* Ensure minimum height */
+  background-color: #000;
 }
 
-/* Ensure the video-js player is properly contained */
+/* Home page video containers */
+.hero-video .video-container,
+.videos .video-container {
+  height: 300px; /* Fixed height for homepage videos */
+}
+
+/* Ensure the video player is properly contained */
 .video-js {
   width: 100%;
-  height: 0 !important;
+  height: 100% !important;
-  padding-top: 56.25% !important; /* 16:9 aspect ratio */
-  /* Ensure controls are within the container */
   position: relative;
 }
 
 /* Position the video element correctly */
-.video-js .vjs-tech {
+.video-js .vjs-tech,
+.video-container video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  object-fit: contain;
 }
 
 /* Fix control bar positioning */
@@ -37,6 +44,12 @@
   .video-container {
     /* More bottom space on mobile */
     margin-bottom: 15px;
+    min-height: 200px;
+  }
+  
+  .hero-video .video-container,
+  .videos .video-container {
+    height: 200px;
   }
 }
 
@@ -46,6 +59,7 @@
   position: relative;
   text-decoration: none;
   color: inherit;
+  height: 100%;
 }
 
 .video-overlay {

docker/showerloop/public/videos/video1.html

@@ -27,15 +27,19 @@
     <style>
         .video-container {
             max-width: 1200px;
+            width: 100%;
             margin: 0 auto;
-            padding: 20px;
+            padding: 0;
             position: relative;
+            height: 70vh; /* 70% of viewport height */
+            min-height: 500px; /* Minimum height to ensure visibility */
+            background-color: #000;
         }
         video {
             width: 100%;
-            height: auto;
+            height: 100%;
-            max-height: 80vh;
+            display: block;
-            background-color: #000;
+            object-fit: contain;
         }
         .video-title {
             text-align: center;
@@ -44,11 +48,21 @@
         .video-description {
             margin-top: 30px;
             padding: 0 20px;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
         }
         .back-link {
             margin: 20px;
             display: inline-block;
         }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .video-container {
+                height: 50vh;
+                min-height: 350px;
+            }
+        }
     </style>
 </head>
 <body class="page">
@@ -91,7 +105,7 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video1" controls preload="auto" width="100%" poster="/static/videos/posters/video1.webp">
+                    <video id="video1" controls autoplay muted preload="auto" width="100%" poster="/static/videos/posters/video1.webp">
                         <source src="/static/videos/video1.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
                     </video>

docker/showerloop/public/videos/video2.html

@@ -27,15 +27,19 @@
     <style>
         .video-container {
             max-width: 1200px;
+            width: 100%;
             margin: 0 auto;
-            padding: 20px;
+            padding: 0;
             position: relative;
+            height: 70vh; /* 70% of viewport height */
+            min-height: 500px; /* Minimum height to ensure visibility */
+            background-color: #000;
         }
         video {
             width: 100%;
-            height: auto;
+            height: 100%;
-            max-height: 80vh;
+            display: block;
-            background-color: #000;
+            object-fit: contain;
         }
         .video-title {
             text-align: center;
@@ -44,11 +48,21 @@
         .video-description {
             margin-top: 30px;
             padding: 0 20px;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
         }
         .back-link {
             margin: 20px;
             display: inline-block;
         }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .video-container {
+                height: 50vh;
+                min-height: 350px;
+            }
+        }
     </style>
 </head>
 <body class="page">
@@ -91,8 +105,8 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video2" controls preload="auto" width="100%" poster="/static/videos/posters/video2.webp">
+                    <video id="video2" controls autoplay muted preload="auto" width="100%" poster="/static/videos/posters/video2.webp">
-                        <source src="/static/videos/video2.mp4" type="video/mp4">
+                        <source src="/static/videos/video2_h264.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
                     </video>
                 </div>

docker/showerloop/public/videos/video3.html

@@ -27,15 +27,19 @@
     <style>
         .video-container {
             max-width: 1200px;
+            width: 100%;
             margin: 0 auto;
-            padding: 20px;
+            padding: 0;
             position: relative;
+            height: 70vh; /* 70% of viewport height */
+            min-height: 500px; /* Minimum height to ensure visibility */
+            background-color: #000;
         }
         video {
             width: 100%;
-            height: auto;
+            height: 100%;
-            max-height: 80vh;
+            display: block;
-            background-color: #000;
+            object-fit: contain;
         }
         .video-title {
             text-align: center;
@@ -44,11 +48,21 @@
         .video-description {
             margin-top: 30px;
             padding: 0 20px;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
         }
         .back-link {
             margin: 20px;
             display: inline-block;
         }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .video-container {
+                height: 50vh;
+                min-height: 350px;
+            }
+        }
     </style>
 </head>
 <body class="page">
@@ -91,7 +105,7 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video3" controls preload="auto" width="100%" poster="/static/videos/posters/video3.webp">
+                    <video id="video3" controls autoplay muted preload="auto" width="100%" poster="/static/videos/posters/video3.webp">
                         <source src="/static/videos/video3.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
                     </video>