fix: aspect ratio improvements (#2171)

- Use CSS aspect-ratio (retain fallback for legacy browsers) - Round aspect ratios (fixes YouTube black border issue)
2021-04-18 16:58:44 +10:00
parent ddb5ad071e
commit 438e425838
6 changed files with 67 additions and 16 deletions
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@ -26,9 +26,13 @@ $embed-padding: ((100 / 16) * 9);

 .plyr__video-embed,
 .plyr__video-wrapper--fixed-ratio {
-  height: 0;
-  padding-bottom: to-percentage($embed-padding);
-  position: relative;
+  @supports not (aspect-ratio: 16 / 9) {
+    height: 0;
+    padding-bottom: to-percentage($embed-padding);
+    position: relative;
+  }
+
+  aspect-ratio: 16 / 9;
 }

 .plyr__video-embed iframe,