fix: set aspect ratio for youtube video player

Bad3r · Dec 15, 2024 · 4477dcf · 4477dcf
1 parent 277096d
commit 4477dcf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css
@@ -1062,3 +1062,8 @@ html.is-mac {
   transition: background-color 0.2s cubic-bezier(0, 1, 0, 1);
   background-color: var(--ls-secondary-background-color, var(--rx-gray-03));
 }
+
+.aspect-video {
+  width: auto;
+  aspect-ratio: 16 / 9;
+}
diff --git a/src/main/frontend/extensions/video/youtube.cljs b/src/main/frontend/extensions/video/youtube.cljs
@@ -59,7 +59,7 @@
         url (if start
               (str url "&start=" start)
               url)]
-    [:iframe
+    [:iframe.aspect-video
      {:id                (str "youtube-player-" id)
       :allow-full-screen "allowfullscreen"
       :allow             "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
@@ -99,7 +99,6 @@
           id (str/replace-first id #"youtube-player-" "")]
       (get (get @state/state :youtube/players) id))))
 
-
 (rum/defc timestamp
   [seconds]
   [:a.svg-small.youtube-timestamp
@@ -121,7 +120,6 @@ Remember: You can paste a raw YouTube url as embedded video on mobile."
        false)
       nil)))
 
-
 (defn parse-timestamp [timestamp']
   (let [reg #"^(?:(\d+):)?([0-5]?\d):([0-5]?\d)$"
         reg-number #"^\d+$"
@@ -145,13 +143,13 @@ Remember: You can paste a raw YouTube url as embedded video on mobile."
   (re-matches #"^(?:(\d+):)?([0-5]?\d):([0-5]?\d)$" "123:22:23") ;; => ["123:22:23" "123" "22" "23"]
   (re-matches #"^(?:(\d+):)?([0-5]?\d):([0-5]?\d)$" "30:23") ;; => ["30:23" nil "30" "23"]
 
- (parse-timestamp "01:23")                                  ;; => 83
+  (parse-timestamp "01:23")                                  ;; => 83
 
- (parse-timestamp "01:01:23")                               ;; => 3683
+  (parse-timestamp "01:01:23")                               ;; => 3683
 
  ;; seconds->display
  ;; https://stackoverflow.com/questions/1322732/convert-seconds-to-hh-mm-ss-with-javascript
- (seconds->display 129600)                                  ;; => "36:00:00"
- (seconds->display 13545)                                   ;; => "03:45:45"
- (seconds->display 18)                                      ;; => "00:18"
- )
+  (seconds->display 129600)                                  ;; => "36:00:00"
+  (seconds->display 13545)                                   ;; => "03:45:45"
+  (seconds->display 18)                                      ;; => "00:18"
+  )