fix: fix sizing of videos

Removes the padding hack they were using, not sure why it was there, maybe as an `aspect-ratio` predecessor?
adil192 · Jan 28, 2024 · 1b82ddd · 1b82ddd
1 parent a326009
commit 1b82ddd
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ Here I will outline the changes I've made over time...
 
 - Styled and fixed the Blackboard Ultra header on mobile
 - Added an "open with new tab" button to Blackboard videos. Requested by a friend so she could have a video and her notes in split screen.
+- Fixed weirdness with the sizing of Blackboard videos (stops them sometimes scrolling off the screen)
 
 ### 20240127
 

diff --git a/main.css b/main.css
@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           UoM Blackboard theme
-@version        20240128.01.00
+@version        20240128.02.00
 @namespace      userstyles.world/user/adil192
 @description    Themes the blackboard UoM website to look more modern and use a consistent colour scheme.
 @author         adil192
@@ -1905,15 +1905,18 @@
   * {
     accent-color: #8142a6 !important;
   }
-  body {
-    margin: 0;
-  }
   html, body,
+  #main,
+  .vl-video-embedded,
+  #video,
   video,
   .vjs-poster {
     background-color: #1d1b1e !important;
     color: #e8e0e5;
     color-scheme: dark;
+    padding: 0;
+    margin: 0;
+    height: 100%;
   }
   .video-js .vjs-control-bar {
     background: rgba(29, 27, 30, 0.7) !important;

diff --git a/styles/_version.scss b/styles/_version.scss
@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           UoM Blackboard theme
-@version        20240128.01.00
+@version        20240128.02.00
 @namespace      userstyles.world/user/adil192
 @description    Themes the blackboard UoM website to look more modern and use a consistent colour scheme.
 @author         adil192

diff --git a/styles/_video.manchester.ac.uk.scss b/styles/_video.manchester.ac.uk.scss
@@ -13,16 +13,18 @@ $video-elem-color: color-mix(in oklab, $on-header, white 90%);
 	accent-color: $primary !important;
 }
 
-body {
-  margin: 0;
-}
-
 html, body,
+#main,
+.vl-video-embedded,
+#video,
 video,
 .vjs-poster {
   background-color: $header !important;
   color: $on-header;
   color-scheme: dark;
+  padding: 0;
+  margin: 0;
+  height: 100%;
 }
 
 .video-js .vjs-control-bar {