ruangrupa/lumbung.space-archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add some fancy stuff to prototype
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
rra 2021-05-05 21:58:04 +02:00
parent 42bd1879ea
commit 5e5eb6dbda
1 changed files with 122 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
lumbung.space/videofeedprototype.html
View File

@ -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'>
<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> -->
<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'>
<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> -->
<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'>
<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> -->
<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'>
<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> -->
<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'>
<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> -->
<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'>
<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> -->
<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
@ -173,4 +280,4 @@
</div>
</body>
</html>
</html>