Updated mobile

index.html

@@ -92,15 +92,15 @@
       </div>
     </div>
   </nav>
-  <div class="video-container is-hidden-touch">
+  <div class="video-container is-hidden-mobile">
     <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">
+  <div class="video-container is-hidden-tablet">
+    <video id="theVideo" class="video" controls playsinline poster="https://democraciaenred.nyc3.digitaloceanspaces.com/projects/reconoceme/reconoceme-vertical-cover.jpg">
+      <source src="https://democraciaenred.nyc3.digitaloceanspaces.com/projects/reconoceme/reconoceme-720-vertical.mp4" type="video/mp4">
     </video>
   </div>
   <div id="home" class="hero is-black is-medium is-fullheight">

style-classes.scss

@@ -8,13 +8,18 @@
 
 .video-container{
   position: relative;
-  // width: fit-content;
-  padding-bottom: 56.25%;
+  background-color: #000;
+  padding-bottom: 177.78%; /* (16 / 9) * 100 for vertical mode */
   height: 0;
-  // height: 100vh;
   width: 100%;
-  background-color: #000;
 
+  @include mixins.from($tablet) {
+    // width: fit-content;
+    padding-bottom: 56.25%;
+    height: 0;
+    // height: 100vh;
+    width: 100%;
+  }
   video {
     position: absolute;
     top: 0;

style.css

@@ -25361,10 +25361,17 @@ has-background-danger.is-hoverable:active {
 
 .video-container {
   position: relative;
-  padding-bottom: 56.25%;
+  background-color: #000;
+  padding-bottom: 177.78%; /* (16 / 9) * 100 for vertical mode */
   height: 0;
   width: 100%;
-  background-color: #000;
+}
+@media screen and (min-width: 769px) {
+  .video-container {
+    padding-bottom: 56.25%;
+    height: 0;
+    width: 100%;
+  }
 }
 .video-container video {
   position: absolute;