xrdwb17xu: Hide native video controls until play and move the author aside while a slide video plays

src/styles/mobile.css

@@ -61,6 +61,15 @@
 .slide-scrim { bottom: 0; height: 58%; background: linear-gradient(180deg, var(--media-fade-0), var(--media-fade)); }
 .slide-scrim-top { top: 0; height: 150px; background: linear-gradient(180deg, var(--media-fade-top), var(--media-fade-0)); }
 
+/* A playing video: the author, text and fades step aside so the native controls are clear. */
+.slide-meta,
+.slide-scrim,
+.slide-scrim-top { transition: opacity .3s var(--ease); }
+.slide-playing .slide-meta,
+.slide-playing .slide-scrim,
+.slide-playing .slide-scrim-top { opacity: 0; pointer-events: none; }
+.slide-playing .slide-meta > * { pointer-events: none; }
+
 /* Author and text over the bottom fade. */
 .slide-meta {
   position: absolute;
@@ -127,6 +136,8 @@
 /* The slide on screen: its content rises in when it snaps into place. */
 .is-cur .slide-meta,
 .is-cur .slide-quote-w { animation: slide-rise .7s var(--ease) both; }
+/* The rise animation's fill would keep the meta visible; a playing video takes it off. */
+.is-cur.slide-playing .slide-meta { animation: none; }
 
 /* Own-post menu: frosted "..." at the top right, the card's delete confirm under it. */
 .slide-menu { position: absolute; top: 70px; right: 12px; z-index: 6; }