add some fancy stuff to prototype

lumbung.space/videofeedprototype.html

@@ -74,10 +74,69 @@
       padding-top: 0.2em;
       display: inline-block;
       padding-bottom: 0.2em;
-
-
     }
 
+    .play-icon {
+        width: 0;
+        height: 0;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%) scale(.5);
+        border-top: 13px solid transparent;
+        border-bottom: 13px solid transparent;
+        border-left: 18px solid hsla(0,0%,100%,.95);
+    }
+
+    .video-thumbnail {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
+      .video-thumbnail {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      overflow: hidden;
+      background-color: #ececec;
+      transition: filter .2s ease;
+    }
+      
+  .video-thumbnail-duration-overlay {
+    display: inline-block;
+    background-color: rgb(255, 240, 157);
+    color: #0e0e22;
+    font-size: 14px;
+    line-height: 1.1;
+    z-index: 10;
+    position: absolute;
+    padding: 1px 3px 1px 3px;
+    right: 5px;
+    bottom: 5px;
+    border: 2px solid #0e0e22;
+    }
+
+    .play-overlay {
+      transition: all .2s ease;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: inherit;
+      height: inherit;
+      opacity: 0;
+      background-color: rgba(0,0,0,.3);
+    }
+
+  .video-thumbnail:hover {
+    text-decoration:none!important
+  }
+  .video-thumbnail:hover .play-overlay {
+  opacity:1
+  }
+  .video-thumbnail:hover .play-overlay .play-icon {
+ transform:translate(-50%,-50%) scale(1)
+
   </style>
 </head>
 
@@ -88,8 +147,16 @@
   
       <div class='video-box'>
           <div class='media'>
+            <a class='video-thumbnail' href="https://tv.undersco.revideos/watch/67a0384c-bd98-4366-a742-dd41045ac56a">
               <img src="https://tv.undersco.re/lazy-static/previews/67a0384c-bd98-4366-a742-dd41045ac56a.jpg">
               <!-- <video data-src="https://tv.undersco.re/videos/embed/67a0384c-bd98-4366-a742-dd41045ac56a"></video> -->
+            <div class="video-thumbnail-duration-overlay">
+              1:25:29 
+            </div>
+            <div class="play-overlay">
+              <div class="play-icon"></div>
+            </div>
+          </a>
           </div>
           <div class='title'>
              Futures Literacy for the Regenerative Economy — Oliver Bream McIntosh & FuPro Collective | RF2020
@@ -102,8 +169,16 @@
   
       <div class='video-box'>
           <div class='media'>
+            <a class='video-thumbnail' href="https://tv.undersco.revideos/watch/5b48b648-090e-4a16-9615-353820a363b9">
               <img src="https://tv.undersco.re/lazy-static/previews/5b48b648-090e-4a16-9615-353820a363b9.jpg">
               <!-- <video data-src="https://tv.undersco.re/videos/embed/5b48b648-090e-4a16-9615-353820a363b9"></video> -->
+            <div class="video-thumbnail-duration-overlay">
+              0:16:59 
+            </div>
+            <div class="play-overlay">
+              <div class="play-icon"></div>
+            </div>
+          </a>
           </div>
           <div class='title'>
              Through the Algorithmic Lens —Irini Papadimitriou | RF2020
@@ -116,8 +191,16 @@
   
       <div class='video-box'>
           <div class='media'>
+            <a class='video-thumbnail' href="https://tv.undersco.revideos/watch/34a443cf-f110-4de1-9867-3834adff47f4">
               <img src="https://tv.undersco.re/lazy-static/previews/34a443cf-f110-4de1-9867-3834adff47f4.jpg">
               <!-- <video data-src="https://tv.undersco.re/videos/embed/34a443cf-f110-4de1-9867-3834adff47f4"></video> -->
+            <div class="video-thumbnail-duration-overlay">
+              2:59:28 
+            </div>
+            <div class="play-overlay">
+              <div class="play-icon"></div>
+            </div>
+          </a>
           </div>
           <div class='title'>
              Peek- creating games for understanding futures — Evan Raskob | RF2020
@@ -130,8 +213,16 @@
   
       <div class='video-box'>
           <div class='media'>
+            <a class='video-thumbnail' href="https://tv.undersco.revideos/watch/51107f34-b18b-47b7-a4ca-704ff2348f71">
               <img src="https://tv.undersco.re/lazy-static/previews/51107f34-b18b-47b7-a4ca-704ff2348f71.jpg">
               <!-- <video data-src="https://tv.undersco.re/videos/embed/51107f34-b18b-47b7-a4ca-704ff2348f71"></video> -->
+            <div class="video-thumbnail-duration-overlay">
+              0:19:25 
+            </div>
+            <div class="play-overlay">
+              <div class="play-icon"></div>
+            </div>
+          </a>
           </div>
           <div class='title'>
              From cradle-to-grave: Tech won’t save us — Benjamin Gaulon | RF2020
@@ -144,8 +235,16 @@
   
       <div class='video-box'>
           <div class='media'>
+            <a class='video-thumbnail' href="https://tv.undersco.revideos/watch/3e9dae3a-1d6b-43b9-9a5b-b0faa65e41a6">
               <img src="https://tv.undersco.re/lazy-static/previews/3e9dae3a-1d6b-43b9-9a5b-b0faa65e41a6.jpg">
               <!-- <video data-src="https://tv.undersco.re/videos/embed/3e9dae3a-1d6b-43b9-9a5b-b0faa65e41a6"></video> -->
+            <div class="video-thumbnail-duration-overlay">
+              0:44:17 
+            </div>
+            <div class="play-overlay">
+              <div class="play-icon"></div>
+            </div>
+          </a>
           </div>
           <div class='title'>
              PGPoetry workshop — Yoav Lifshitz | RF2020
@@ -158,8 +257,16 @@
   
       <div class='video-box'>
           <div class='media'>
+            <a class='video-thumbnail' href="https://tv.undersco.revideos/watch/23d2acf3-4dc8-4ad4-b8b1-a32025725317">
               <img src="https://tv.undersco.re/lazy-static/previews/23d2acf3-4dc8-4ad4-b8b1-a32025725317.jpg">
               <!-- <video data-src="https://tv.undersco.re/videos/embed/23d2acf3-4dc8-4ad4-b8b1-a32025725317"></video> -->
+            <div class="video-thumbnail-duration-overlay">
+              1:50:55 
+            </div>
+            <div class="play-overlay">
+              <div class="play-icon"></div>
+            </div>
+          </a>
           </div>
           <div class='title'>
              Avatars in Zoom for All — Eyal Gruss | RF2020