# Fun with CSS: Gamified Video Workout Screen

**URL:** https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868
**Category:** Ask for Help
**Tags:** custom-code
**Created:** [February 23, 2022, 3:16am UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868 "2022-02-23T03:16:05Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [February 23, 2022, 3:16am UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868/1 "2022-02-23T03:16:05Z")

</div>

Still a WIP:

 ![CleanShot 2022-02-22 at 22.16.29@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/6/967c8d5492322155ac6e8a58ebf53a427a77399c.jpeg)

> **[CleanShot 2022-02-22 at 22.11.36](https://cln.sh/RJnfTY)**
>
> GIF uploaded to CleanShot Cloud

Caveats:  
1.) Webview of embedded Vimeo video player  
2.) Video shot in portrait mode

```auto
<pre><span><style>
/* remove navbar */
[data-test="glide-app-bar"] :nth-child(1) {
background: transparent;
backdrop-filter: blur(0px);
}

/* remove "Back" and screen title */
[data-test="back-button"], [data-test="nav-bar"] h1 {
color: transparent;
}

/* adjust webview dimensions and position */
[data-test="app-web-view"] {
height: 680px;
margin-top: -100px;
background-color: #29BA9F;
}

/* adjust webview dimensions and position for tablet */
[id="tablet"] [data-test="app-web-view"] {
margin-top: 0 !important;
}

/* overlap text box video title */
[data-test="app-text-box"] {
padding-top: 30px !important;
margin-top: -30px !important;
background-color: #fff !important;
border-radius: 25px 25px 0 0 !important;
z-index: 1 !important;
}

```

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 23, 2022, 4:19am UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868/2 "2022-02-23T04:19:46Z")

</div>

Sweet!

---

<div class="post-metadata">

### Author: ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)
#### Post date: [February 23, 2022, 5:37am UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868/3 "2022-02-23T05:37:04Z")

</div>

VERY nice!!

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [February 23, 2022, 1:04pm UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868/4 "2022-02-23T13:04:13Z")

</div>

Like always, great job! You give me an idea of how to improve my buy buttons.  
Tnx @Robert_Petitto .

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [February 23, 2022, 2:23pm UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868/5 "2022-02-23T14:23:35Z")

</div>

Nice! Would love to see it when it’s done.

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [February 23, 2022, 2:52pm UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868/6 "2022-02-23T14:52:24Z")

</div>

non-applicable… I got the wrong idea… I thought you resize webview and made the glide component overlapping…  
but here is a preview of my new project:

> **[Vcoin](https://vcoin-demo.glideapp.io/)**

almost ready 😉

---

<div class="post-metadata">

### Author: ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)
#### Post date: [April 16, 2022, 5:42pm UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868/7 "2022-04-16T17:42:32Z")

</div>

@Robert_Petitto are you using a detail screen with a webview element (pro) or an action open link → webview for this? Thanks.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [April 16, 2022, 6:26pm UTC](https://community.glideapps.com/t/fun-with-css-gamified-video-workout-screen/38868/8 "2022-04-16T18:26:04Z")

</div>

Details screen. You can also achieve this with a video component as long as the URL is compatible.