1 files changed, 28 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
index 9ea8b39..a03d25e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -581,6 +581,34 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 .lightbox-x:hover { background: rgba(255, 255, 255, .24); }
 @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
 .note-video { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; margin-top: 6px; background: #000; }
+/* A YouTube link, shown as the video it is: the still, a play button, and a
+   corner link out. The player replaces all of it on the first tap — see
+   youtubeEmbed for why it isn't there from the start. */
+.yt-embed {
+  position: relative; margin-top: 6px; border-radius: 10px; overflow: hidden;
+  background: #000; aspect-ratio: 16 / 9; max-width: 100%;
+}
+.yt-embed img.yt-poster, .yt-embed iframe {
+  display: block; width: 100%; height: 100%; border: 0;
+  object-fit: cover; /* hqdefault is 4:3 with bars; cover trims them */
+}
+.yt-play {
+  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
+  display: flex; align-items: center; justify-content: center; cursor: pointer;
+  background: rgba(0, 0, 0, .18); color: #fff;
+}
+.yt-play > span {
+  width: 62px; height: 44px; border-radius: 11px; background: rgba(18, 18, 18, .78);
+  display: flex; align-items: center; justify-content: center; padding-left: 3px;
+  transition: background .12s;
+}
+.yt-play:hover { background: rgba(0, 0, 0, .28); }
+.yt-play:hover > span { background: #e00; }
+.yt-open {
+  position: absolute; top: 6px; right: 8px; color: #fff; font-size: 15px; line-height: 1;
+  padding: 4px 7px; border-radius: 8px; background: rgba(18, 18, 18, .6); text-decoration: none;
+}
+.yt-open:hover { background: rgba(18, 18, 18, .85); text-decoration: none; }
 /* the profile notes feed: page-scrolled (no inner scrollbox); on phones it
    runs edge to edge — the card walls step outside #app's padding */
 .notes-feed { padding: 2px 14px; }