diff options
| author | Sam Potts <sam@potts.es> | 2021-04-18 16:58:44 +1000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-18 16:58:44 +1000 |
| commit | 438e42583859eed0d2e9fd1a00b9cdc32a71f9b4 (patch) | |
| tree | 95660a86c755d79b04bc3e18b7375b970df63281 /src/sass | |
| parent | ddb5ad071e4f6387cce72156ba1d85e75d41fd2c (diff) | |
| download | plyr-438e42583859eed0d2e9fd1a00b9cdc32a71f9b4.tar.lz plyr-438e42583859eed0d2e9fd1a00b9cdc32a71f9b4.tar.xz plyr-438e42583859eed0d2e9fd1a00b9cdc32a71f9b4.zip | |
fix: aspect ratio improvements (#2171)
- Use CSS aspect-ratio (retain fallback for legacy browsers)
- Round aspect ratios (fixes YouTube black border issue)
Diffstat (limited to 'src/sass')
| -rw-r--r-- | src/sass/types/video.scss | 10 |
1 files changed, 7 insertions, 3 deletions
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss index 79b3e158..fe7d8b37 100644 --- 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, |