23 files changed, 107 insertions, 4 deletions
diff --git a/src/features/messages.js b/src/features/messages.js
index c82bd0e..74b7d4a 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -7949,7 +7949,7 @@ export function messagesFeature(ctx) {
   // known, never taller than the screen; only a clip taller than that sits
   // in a black frame, rather than in a strip at the left.
   const videoBoxStyle = (d) => d && d.width && d.height
-    ? `width:100%;aspect-ratio:${d.width}/${d.height};max-height:100vh;object-fit:contain`
+    ? `width:100%;aspect-ratio:${d.width}/${d.height};max-height:var(--vid-cap);object-fit:contain`
     : 'width:100%;aspect-ratio:16/9;object-fit:contain';
   // Over a clip that waits for a tap: what it costs, and the tap that plays
   // it (with sound — the reader asked for this one). The box is left alone
@@ -8095,10 +8095,19 @@ export function messagesFeature(ctx) {
     });
   }
   // A tap on the picture itself (not the player's own play button or its
-  // control bar): inline, it goes full screen — the corner button is a
+  // control bar): inline, a mouse click pauses a playing clip; a paused one
+  // (or any touch) goes full screen — the corner button is a
   // reach on a phone. Full screen, it pauses a playing clip, and a tap on a
   // paused one comes back out. The player's controls are inside the video
   // element, so where they sit is judged from the tap's position.
+  // The big play/pause over a feed clip is for a mouse: <html> carries
+  // .has-mouse while the last pointer was one (a touch laptop switches with
+  // the hand), and CSS shows the button on :hover (a repaint can't drop it).
+  if (typeof document !== 'undefined') {
+    const mouseIs = (on) => document.documentElement.classList.toggle('has-mouse', on);
+    document.addEventListener('pointermove', (e) => { if (e.pointerType === 'mouse') mouseIs(true); }, { passive: true });
+    document.addEventListener('pointerdown', (e) => { if (e.pointerType !== 'mouse') mouseIs(false); }, { passive: true });
+  }
   const fsElement = () => (typeof document !== 'undefined' && (document.fullscreenElement || document.webkitFullscreenElement)) || null;
   let videoTapAt = 0; // a touch's tap on a clip, taken at pointerup: the click after it lands on whatever opened
   function videoTap(e, url) {
@@ -8120,6 +8129,18 @@ export function messagesFeature(ctx) {
       else (document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document)?.catch?.(() => {});
       return true;
     }
+    // a mouse click on a playing clip just pauses it (Adam: "clicking on a
+    // video that's playing should pause the video, not full screen it"); it
+    // keeps its controls and the middle button resumes it, and a click on it
+    // paused opens the pager. A touch has no middle button: its tap still opens.
+    if (!v.paused && e.pointerType === 'mouse') {
+      v.pause();
+      wokeClips.add(url);
+      const box = v.closest('.note-video-box');
+      if (box) { box.classList.remove('idle'); box._skipMorph = true; }
+      v.controls = true;
+      return true;
+    }
     if (openClip(v, url)) return true;
     // a clip still idle (autoplaying, no controls) becomes the reader's
     wokeClips.add(url);
@@ -8187,8 +8208,33 @@ export function messagesFeature(ctx) {
       if (videoTap(e, url)) el._tapAt = videoTapAt = Date.now();
     });
     v.muted = !loud; // the property, not just the attribute: a script-made element autoplays only muted
-    const box = h('div', { class: 'note-video-box' + (idle ? ' idle' : '') }, v);
+    // a tall clip is held to the cap's height and the box narrows to its
+    // shape, instead of a full-width box of black bars (Adam, on a 1920 screen)
+    const boxCap = (w, ht) => w && ht ? `max-width:calc(var(--vid-cap) * ${w} / ${ht})` : undefined;
+    const known = feedMedia(url);
+    const box = h('div', { class: 'note-video-box' + (idle ? ' idle' : ''), style: boxCap(known && known.width, known && known.height) }, v);
+    v.addEventListener('loadedmetadata', () => { if (v.videoWidth && v.videoHeight) box.style.maxWidth = `calc(var(--vid-cap) * ${v.videoWidth} / ${v.videoHeight})`; });
     if (loud) box._skipMorph = true;
+    // With a mouse: a big play/pause button in the middle while the pointer is
+    // over the clip. It plays or pauses in place, never full screen (a click
+    // elsewhere on a paused clip opens the pager). Touch keeps its taps.
+    const pp = h('button', { class: 'vid-pp', type: 'button', 'aria-label': t('videoPlay'), onClick: (e) => {
+      e.stopPropagation(); e.preventDefault();
+      const player = e.currentTarget.closest('.note-video-box')?.querySelector('video');
+      if (!player) return;
+      if (player.paused) { tappedClips.add(url); player.play().catch(() => {}); } else player.pause();
+    } }, h('span', { class: 'vid-pp-i', 'aria-hidden': 'true' }));
+    const ppState = () => {
+      const live = v.closest('.note-video-box');
+      const b = live && live.querySelector('.vid-pp');
+      if (!b) return;
+      b.classList.toggle('playing', !v.paused);
+      b.setAttribute('aria-label', t(v.paused ? 'videoPlay' : 'videoPause'));
+    };
+    v.addEventListener('play', ppState);
+    v.addEventListener('pause', ppState);
+    box.append(pp);
+
     // remembered by clip, so a repaint draws the box as it now stands
     const wake = () => {
       wokeClips.add(url);
diff --git a/src/i18n.js b/src/i18n.js
index 4514175..1e71e95 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -282,6 +282,8 @@ const STR = {
     clipsAll: 'All shapes',
     clipsToggleTitle: 'Which clips to show: the ones that fit the screen, or all',
     videoTapToPlay: "Tap to play",
+    videoPlay: "Play",
+    videoPause: "Pause",
     pagerFetchingVideo: "Fetching the next video…",
     pagerFetchingPictures: "Fetching more pictures…",
     pagerCaughtUp: "That’s everything for now",
diff --git a/src/locales/ar.json b/src/locales/ar.json
index f112568..28af336 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "لا صور في هذه الخلاصة بعد.",
   "mediaNoVideos": "لا فيديوهات عمودية في هذه الخلاصة بعد.",
   "videoTapToPlay": "انقر للتشغيل",
+  "videoPlay": "تشغيل",
+  "videoPause": "إيقاف مؤقت",
   "videoLargeTitle": "الفيديوهات",
   "videoLargeToggle": "تشغيل الفيديوهات الكبيرة تلقائيًا",
   "videoLargeHelp": "الفيديوهات التي تزيد على {mb} ميغابايت أو تتجاوز 1080p تنتظر نقرة، حتى لا تستهلك الخلاصة بياناتك. الحد أقل على الاتصال البطيء أو عند توفير البيانات.",
diff --git a/src/locales/bn.json b/src/locales/bn.json
index 85ce58a..d3d6253 100644
--- a/src/locales/bn.json
+++ b/src/locales/bn.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "এই ফিডে এখনও কোনো ছবি নেই।",
   "mediaNoVideos": "এই ফিডে এখনও কোনো খাড়া ভিডিও নেই।",
   "videoTapToPlay": "চালাতে ট্যাপ করুন",
+  "videoPlay": "চালান",
+  "videoPause": "বিরতি",
   "videoLargeTitle": "ভিডিও",
   "videoLargeToggle": "বড় ভিডিও নিজে থেকে চালান",
   "videoLargeHelp": "{mb} MB-এর বেশি বা 1080p-এর ওপরের ভিডিও ট্যাপের অপেক্ষায় থাকে, যাতে ফিড আপনার ডেটা না খায়। ধীর বা ডেটা-সেভার সংযোগে সীমা কম।",
diff --git a/src/locales/de.json b/src/locales/de.json
index 0210332..c5a981f 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "Noch keine Bilder in diesem Feed.",
   "mediaNoVideos": "Noch keine Hochkant-Videos in diesem Feed.",
   "videoTapToPlay": "Zum Abspielen tippen",
+  "videoPlay": "Abspielen",
+  "videoPause": "Pause",
   "videoLargeTitle": "Videos",
   "videoLargeToggle": "Große Videos automatisch abspielen",
   "videoLargeHelp": "Videos über {mb} MB oder über 1080p warten auf einen Tipp, damit der Feed nicht dein Datenvolumen frisst. Bei langsamer Verbindung oder Datensparmodus ist die Grenze niedriger.",
diff --git a/src/locales/es.json b/src/locales/es.json
index 9637b0a..781a2e8 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "Aún no hay imágenes en este feed.",
   "mediaNoVideos": "Aún no hay vídeos verticales en este feed.",
   "videoTapToPlay": "Toca para reproducir",
+  "videoPlay": "Reproducir",
+  "videoPause": "Pausa",
   "videoLargeTitle": "Vídeos",
   "videoLargeToggle": "Reproducir vídeos grandes automáticamente",
   "videoLargeHelp": "Los vídeos de más de {mb} MB o por encima de 1080p esperan a que los toques, para que el feed no se coma tus datos. El límite es menor con una conexión lenta o en ahorro de datos.",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 280be04..da332ae 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "Pas encore d’images dans ce fil.",
   "mediaNoVideos": "Pas encore de vidéos verticales dans ce fil.",
   "videoTapToPlay": "Touchez pour lire",
+  "videoPlay": "Lire",
+  "videoPause": "Pause",
   "videoLargeTitle": "Vidéos",
   "videoLargeToggle": "Lire automatiquement les grosses vidéos",
   "videoLargeHelp": "Les vidéos de plus de {mb} Mo ou au-delà de 1080p attendent un toucher, pour que le fil ne dévore pas vos données. La limite est plus basse sur une connexion lente ou en économie de données.",
diff --git a/src/locales/hi.json b/src/locales/hi.json
index 8057344..2b0f5a6 100644
--- a/src/locales/hi.json
+++ b/src/locales/hi.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "इस फ़ीड में अभी कोई तस्वीर नहीं।",
   "mediaNoVideos": "इस फ़ीड में अभी कोई वर्टिकल वीडियो नहीं।",
   "videoTapToPlay": "चलाने के लिए टैप करें",
+  "videoPlay": "चलाएँ",
+  "videoPause": "रोकें",
   "videoLargeTitle": "वीडियो",
   "videoLargeToggle": "बड़े वीडियो अपने आप चलाएँ",
   "videoLargeHelp": "{mb} MB से बड़े या 1080p से ऊपर के वीडियो टैप का इंतज़ार करते हैं, ताकि फ़ीड आपका डेटा न खाए। धीमे या डेटा-सेवर कनेक्शन पर सीमा कम होती है।",
diff --git a/src/locales/id.json b/src/locales/id.json
index 6773d96..6a6f24a 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "Belum ada gambar di feed ini.",
   "mediaNoVideos": "Belum ada video vertikal di feed ini.",
   "videoTapToPlay": "Ketuk untuk memutar",
+  "videoPlay": "Putar",
+  "videoPause": "Jeda",
   "videoLargeTitle": "Video",
   "videoLargeToggle": "Putar otomatis video besar",
   "videoLargeHelp": "Video di atas {mb} MB atau lebih dari 1080p menunggu ketukan, agar feed tidak menghabiskan kuota. Batasnya lebih rendah di koneksi lambat atau mode hemat data.",
diff --git a/src/locales/it.json b/src/locales/it.json
index 7ac8b00..196b4c8 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -222,6 +222,8 @@
  "playVideo": "Riproduci",
  "videoUnmute": "Attiva audio",
  "videoTapToPlay": "Tocca per riprodurre",
+ "videoPlay": "Riproduci",
+ "videoPause": "Pausa",
  "videoNoPicture": "Questo browser non riesce a mostrare l'immagine di questo video",
  "videoOpenFile": "Apri il file",
  "videoLargeTitle": "Video",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index b8968cc..c37ebf3 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "このフィードにはまだ画像がありません。",
   "mediaNoVideos": "このフィードにはまだ縦型動画がありません。",
   "videoTapToPlay": "タップして再生",
+  "videoPlay": "再生",
+  "videoPause": "一時停止",
   "videoLargeTitle": "動画",
   "videoLargeToggle": "大きな動画を自動再生",
   "videoLargeHelp": "{mb} MBを超える動画や1080pを超える動画は、データを使いすぎないようタップするまで再生しません。低速回線やデータセーバー時は上限が下がります。",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index e4bf342..58da658 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -909,6 +909,8 @@
   "mediaNoImages": "이 피드에는 아직 이미지가 없습니다.",
   "mediaNoVideos": "이 피드에는 아직 세로 동영상이 없습니다.",
   "videoTapToPlay": "탭하여 재생",
+  "videoPlay": "재생",
+  "videoPause": "일시정지",
   "videoLargeTitle": "동영상",
   "videoLargeToggle": "큰 동영상 자동 재생",
   "videoLargeHelp": "{mb}MB를 넘거나 1080p보다 높은 동영상은 데이터를 아끼기 위해 탭할 때까지 기다립니다. 느린 연결이나 데이터 절약 모드에서는 한도가 더 낮습니다.",
diff --git a/src/locales/mr.json b/src/locales/mr.json
index 17ee1d5..5936679 100644
--- a/src/locales/mr.json
+++ b/src/locales/mr.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "या फीडमध्ये अजून चित्रे नाहीत.",
   "mediaNoVideos": "या फीडमध्ये अजून उभे व्हिडिओ नाहीत.",
   "videoTapToPlay": "चालवण्यासाठी टॅप करा",
+  "videoPlay": "चालवा",
+  "videoPause": "थांबवा",
   "videoLargeTitle": "व्हिडिओ",
   "videoLargeToggle": "मोठे व्हिडिओ आपोआप चालवा",
   "videoLargeHelp": "{mb} MB पेक्षा मोठे किंवा 1080p पेक्षा वरचे व्हिडिओ तुमचा डेटा वाचवण्यासाठी टॅपची वाट पाहतात. धीम्या किंवा डेटा-सेव्हर कनेक्शनवर मर्यादा कमी असते.",
diff --git a/src/locales/pt.json b/src/locales/pt.json
index 11ff22c..b206ee0 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "Ainda não há imagens neste feed.",
   "mediaNoVideos": "Ainda não há vídeos verticais neste feed.",
   "videoTapToPlay": "Toque para reproduzir",
+  "videoPlay": "Reproduzir",
+  "videoPause": "Pausar",
   "videoLargeTitle": "Vídeos",
   "videoLargeToggle": "Reproduzir vídeos grandes automaticamente",
   "videoLargeHelp": "Vídeos acima de {mb} MB ou de 1080p esperam um toque, para o feed não consumir seus dados. O limite é menor em conexões lentas ou com economia de dados.",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 0f2936d..910e781 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "В этой ленте пока нет фото.",
   "mediaNoVideos": "В этой ленте пока нет вертикальных видео.",
   "videoTapToPlay": "Нажмите, чтобы воспроизвести",
+  "videoPlay": "Воспроизвести",
+  "videoPause": "Пауза",
   "videoLargeTitle": "Видео",
   "videoLargeToggle": "Автовоспроизведение больших видео",
   "videoLargeHelp": "Видео больше {mb} МБ или выше 1080p ждут нажатия, чтобы лента не съедала трафик. На медленном соединении или в режиме экономии лимит ниже.",
diff --git a/src/locales/sw.json b/src/locales/sw.json
index b130faf..5fcc4f0 100644
--- a/src/locales/sw.json
+++ b/src/locales/sw.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "Bado hakuna picha kwenye mlisho huu.",
   "mediaNoVideos": "Bado hakuna video wima kwenye mlisho huu.",
   "videoTapToPlay": "Gusa ili kucheza",
+  "videoPlay": "Cheza",
+  "videoPause": "Sitisha",
   "videoLargeTitle": "Video",
   "videoLargeToggle": "Cheza video kubwa zenyewe",
   "videoLargeHelp": "Video zaidi ya MB {mb} au juu ya 1080p husubiri uguse, ili mlisho usimalize data yako. Kikomo ni cha chini kwenye muunganisho wa polepole au wa kuokoa data.",
diff --git a/src/locales/ta.json b/src/locales/ta.json
index da4e5b0..e866428 100644
--- a/src/locales/ta.json
+++ b/src/locales/ta.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "இந்த ஊட்டத்தில் இன்னும் படங்கள் இல்லை.",
   "mediaNoVideos": "இந்த ஊட்டத்தில் இன்னும் செங்குத்து வீடியோக்கள் இல்லை.",
   "videoTapToPlay": "இயக்கத் தட்டவும்",
+  "videoPlay": "இயக்கு",
+  "videoPause": "இடைநிறுத்து",
   "videoLargeTitle": "வீடியோக்கள்",
   "videoLargeToggle": "பெரிய வீடியோக்களைத் தானாக இயக்கு",
   "videoLargeHelp": "{mb} MB-க்கு மேல் அல்லது 1080p-க்கு மேலான வீடியோக்கள் உங்கள் டேட்டாவைச் சேமிக்க, தட்டும் வரை காத்திருக்கும். மெதுவான அல்லது டேட்டா சேமிப்பு இணைப்பில் வரம்பு குறைவு.",
diff --git a/src/locales/te.json b/src/locales/te.json
index 7e60eaf..40ba4ad 100644
--- a/src/locales/te.json
+++ b/src/locales/te.json
@@ -245,6 +245,8 @@
   "mediaNoImages": "ఈ ఫీడ్‌లో ఇంకా చిత్రాలు లేవు.",
   "mediaNoVideos": "ఈ ఫీడ్‌లో ఇంకా నిలువు వీడియోలు లేవు.",
   "videoTapToPlay": "ప్లే చేయడానికి నొక్కండి",
+  "videoPlay": "ప్లే",
+  "videoPause": "పాజ్",
   "videoLargeTitle": "వీడియోలు",
   "videoLargeToggle": "పెద్ద వీడియోలను ఆటో‌ప్లే చేయి",
   "videoLargeHelp": "{mb} MB కంటే పెద్దవి లేదా 1080p పైబడిన వీడియోలు మీ డేటా ఆదా కోసం నొక్కే వరకు ఆగుతాయి. నెమ్మదైన లేదా డేటా సేవర్ కనెక్షన్‌లో పరిమితి తక్కువ.",
diff --git a/src/locales/tr.json b/src/locales/tr.json
index 1e60eeb..31734b9 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -909,6 +909,8 @@
   "mediaNoImages": "Bu akışta henüz görsel yok.",
   "mediaNoVideos": "Bu akışta henüz dikey video yok.",
   "videoTapToPlay": "Oynatmak için dokun",
+  "videoPlay": "Oynat",
+  "videoPause": "Duraklat",
   "videoLargeTitle": "Videolar",
   "videoLargeToggle": "Büyük videoları otomatik oynat",
   "videoLargeHelp": "{mb} MB’den büyük veya 1080p’nin üzerindeki videolar, akış verini tüketmesin diye dokunmanı bekler. Yavaş ya da veri tasarruflu bağlantıda sınır daha düşüktür.",
diff --git a/src/locales/ur.json b/src/locales/ur.json
index 6efb6ec..0fb30a2 100644
--- a/src/locales/ur.json
+++ b/src/locales/ur.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "اس فیڈ میں ابھی کوئی تصویر نہیں۔",
   "mediaNoVideos": "اس فیڈ میں ابھی کوئی عمودی ویڈیو نہیں۔",
   "videoTapToPlay": "چلانے کے لیے ٹیپ کریں",
+  "videoPlay": "چلائیں",
+  "videoPause": "روکیں",
   "videoLargeTitle": "ویڈیوز",
   "videoLargeToggle": "بڑی ویڈیوز خود چلائیں",
   "videoLargeHelp": "{mb} MB سے بڑی یا 1080p سے اوپر کی ویڈیوز ٹیپ کا انتظار کرتی ہیں، تاکہ فیڈ آپ کا ڈیٹا نہ کھائے۔ سست یا ڈیٹا بچت والے کنکشن پر حد کم ہوتی ہے۔",
diff --git a/src/locales/vi.json b/src/locales/vi.json
index 415f4e7..92e3362 100644
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "Bảng tin này chưa có ảnh.",
   "mediaNoVideos": "Bảng tin này chưa có video dọc.",
   "videoTapToPlay": "Chạm để phát",
+  "videoPlay": "Phát",
+  "videoPause": "Tạm dừng",
   "videoLargeTitle": "Video",
   "videoLargeToggle": "Tự động phát video lớn",
   "videoLargeHelp": "Video trên {mb} MB hoặc cao hơn 1080p sẽ chờ bạn chạm, để bảng tin không ngốn dữ liệu. Giới hạn thấp hơn khi kết nối chậm hoặc tiết kiệm dữ liệu.",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 6b3cc49..502e12a 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "此动态中还没有图片。",
   "mediaNoVideos": "此动态中还没有竖屏视频。",
   "videoTapToPlay": "点按播放",
+  "videoPlay": "播放",
+  "videoPause": "暂停",
   "videoLargeTitle": "视频",
   "videoLargeToggle": "自动播放大视频",
   "videoLargeHelp": "超过 {mb} MB 或高于 1080p 的视频会等你点按再播放，以免动态耗尽流量。在慢速或省流量连接下，上限更低。",
diff --git a/src/style.css b/src/style.css
index 384b6d6..a895054 100644
--- a/src/style.css
+++ b/src/style.css
@@ -847,11 +847,26 @@ 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; width: 100%; height: auto; max-height: 100vh; object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; }
+.note-video { display: block; width: 100%; height: auto; max-height: var(--vid-cap); object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; }
 /* a video plays by itself, muted, while it is on screen; the corner button
    turns the sound on (see autoplay in messages.js) */
 .note-video-box { position: relative; display: block; max-width: 100%; margin-top: 6px; }
 .note-video-box .note-video { margin-top: 0; }
+/* the height a feed clip may take: the whole screen on a phone, three
+   quarters of it on a computer (a portrait clip on a 1920 screen ran off it) */
+:root { --vid-cap: 100vh; }
+@media (min-width: 900px) { :root { --vid-cap: 75vh; } }
+/* with a mouse: the big play/pause in the middle, while the pointer is over the clip */
+.vid-pp {
+  position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0;
+  border: 0; border-radius: 50%; background: rgba(18, 18, 18, .6); color: #fff; cursor: pointer;
+  display: none; align-items: center; justify-content: center;
+}
+.vid-pp:hover { background: rgba(18, 18, 18, .85); }
+.vid-pp-i { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; }
+.vid-pp.playing .vid-pp-i { width: 20px; height: 24px; margin: 0; border-width: 0 7px; border-color: #fff; }
+.has-mouse .note-video-box:hover .vid-pp, .vid-pp:focus-visible { display: flex; }
+.note-video-box:has(.vid-heavy) .vid-pp { display: none; }
 .vid-sound {
   position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; padding: 4px 10px; border: 0;
   border-radius: 999px; background: rgba(18, 18, 18, .7); color: #fff; font-size: 13px; line-height: 1.3;