diff options
| author | Sam Potts <me@sampotts.me> | 2017-11-06 19:38:31 +1100 |
|---|---|---|
| committer | Sam Potts <me@sampotts.me> | 2017-11-06 19:38:31 +1100 |
| commit | 006871074032e5b24408fb654eb2856585c491e1 (patch) | |
| tree | 7fdfd71a6ff6bc1abef9d343e87e9f9f08a34346 /src/less/components/embed.less | |
| parent | 5fe477340b7c446dcbf711daa06d81c725c45b34 (diff) | |
| download | plyr-006871074032e5b24408fb654eb2856585c491e1.tar.lz plyr-006871074032e5b24408fb654eb2856585c491e1.tar.xz plyr-006871074032e5b24408fb654eb2856585c491e1.zip | |
Started on documentation and aspect ratio option
Diffstat (limited to 'src/less/components/embed.less')
| -rw-r--r-- | src/less/components/embed.less | 10 |
1 files changed, 7 insertions, 3 deletions
diff --git a/src/less/components/embed.less b/src/less/components/embed.less index f6b5b307..dcf889b7 100644 --- a/src/less/components/embed.less +++ b/src/less/components/embed.less @@ -4,7 +4,11 @@ // -------------------------------------------------------------- .plyr__video-embed { - padding-bottom: 56.25%; /* 16:9 */ + // Default to 16:9 ratio but this is set by JavaScript based on config + @padding: ((100 / 16) * 9); + @offset: unit((100 - @padding) / 2, ~'%'); + + padding-bottom: unit(@padding, ~'%'); height: 0; iframe { @@ -20,8 +24,8 @@ // Vimeo hack > div { position: relative; - padding-bottom: 200%; - transform: translateY(-35.95%); + padding-bottom: 100%; + transform: translateY(-@offset); } } // To allow mouse events to be captured if full support |