chore: Update video container styles and add play button functionality

DemocraciaEnRed · Sep 5, 2024 · 84e6450 · 84e6450
1 parent e55efc1
commit 84e6450
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -44,6 +44,17 @@
   </script>
 </head>
 <body>
+  <div class="video-container is-hidden-touch">
+    <video id="theVideo" class="video" controls playsinline poster="https://democraciaenred.nyc3.digitaloceanspaces.com/projects/reconoceme/reconoceme-169-desktop-firstframe.jpg">
+      <source src="https://democraciaenred.nyc3.digitaloceanspaces.com/projects/reconoceme/reconoceme-169-compressed.mp4" type="video/mp4">
+    </video>
+    <button id="playButton" class="play-button has-text-white is-hidden-mobile"><i class="fas fa-play-circle fa-5x"></i></button>
+  </div>
+  <div class="video-container is-hidden-desktop">
+    <video id="theVideo" class="video" controls playsinline poster="https://democraciaenred.nyc3.digitaloceanspaces.com/projects/reconoceme/reconoceme-169-desktop-firstframe.jpg">
+      <source src="https://democraciaenred.nyc3.digitaloceanspaces.com/projects/reconoceme/reconoceme-169-720-compressed.mp4" type="video/mp4">
+    </video>
+  </div>
   <nav class="navbar is-black" role="navigation" aria-label="main navigation">
     <div class="container">
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/script.js b/script.js
@@ -1,7 +1,27 @@
 let facesLoop;
 let facesLoopReversed;
 
+const video = document.getElementById("theVideo");
+const playButton = document.getElementById("playButton");
 
+playButton.addEventListener("click", function() {
+    if (video.paused) {
+        video.play();
+    } else {
+        video.pause();
+    }
+    // playButton.classList.toggle("is-hidden");
+});
+
+// if the video is playing, hide the play button
+video.addEventListener("play", function() {
+  playButton.classList.add("is-hidden");
+})
+
+// if the video is paused, show the play button
+video.addEventListener("pause", function() {
+  playButton.classList.remove("is-hidden");
+})
 
 function playAnimation() {
   if(facesLoop) {

diff --git a/style-classes.scss b/style-classes.scss
@@ -6,6 +6,37 @@
   height: 100px;
 }
 
+.video-container{
+  position: relative;
+  // width: fit-content;
+  padding-bottom: 56.25%;
+  // height: 0;
+  height: 100vh;
+  width: 100%;
+  background-color: #000;
+
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .play-button {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1;
+      background: transparent;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+  }
+}
+
+
 #home {
   .hero-body {
     background: url('./assets/bg-hero-top.jpg');

diff --git a/style.css b/style.css
@@ -25359,6 +25359,32 @@ has-background-danger.is-hoverable:active {
   height: 100px;
 }
 
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 100vh;
+  width: 100%;
+  background-color: #000;
+}
+.video-container video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.video-container .play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
 #home .hero-body {
   background: url("./assets/bg-hero-top.jpg");
   background-size: cover;

diff --git a/style.css.map b/style.css.map