Fun with CSS: Gamified Video Workout Screen

Still a WIP:

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

<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;
}
19 Likes

Sweet!

VERY nice!!

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

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

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:

almost ready :wink:

1 Like

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

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

2 Likes