diff options
author | Sam Potts <sam@potts.es> | 2018-04-25 07:38:17 +1000 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-04-25 07:38:17 +1000 |
commit | f13260c10aad1e7e95f1d13a31c7f362c674ddb6 (patch) | |
tree | ad4e351f2d3603325e2d388bdc64df8f15cd98b8 /src/sass/components/embed.scss | |
parent | e138e6d51e3cd85d85ccbd32674f75a63a3771ef (diff) | |
parent | f1b275aedce897b42f025afac7a0937dc5871235 (diff) | |
download | plyr-f13260c10aad1e7e95f1d13a31c7f362c674ddb6.tar.lz plyr-f13260c10aad1e7e95f1d13a31c7f362c674ddb6.tar.xz plyr-f13260c10aad1e7e95f1d13a31c7f362c674ddb6.zip |
Merge pull request #919 from sampotts/master
Merge back
Diffstat (limited to 'src/sass/components/embed.scss')
-rw-r--r-- | src/sass/components/embed.scss | 25 |
1 files changed, 15 insertions, 10 deletions
diff --git a/src/sass/components/embed.scss b/src/sass/components/embed.scss index c15ee522..d72836de 100644 --- a/src/sass/components/embed.scss +++ b/src/sass/components/embed.scss @@ -3,14 +3,12 @@ // YouTube, Vimeo, etc // -------------------------------------------------------------- -.plyr__video-embed { - // Default to 16:9 ratio but this is set by JavaScript based on config - $padding: ((100 / 16) * 9); - $height: 240; - $offset: to-percentage(($height - $padding) / ($height / 50)); +// Default to 16:9 ratio but this is set by JavaScript based on config +$embed-padding: ((100 / 16) * 9); +.plyr__video-embed { height: 0; - padding-bottom: to-percentage($padding); + padding-bottom: to-percentage($embed-padding); position: relative; iframe { @@ -22,6 +20,17 @@ user-select: none; width: 100%; } +} + +// If the full custom UI is supported +.plyr--full-ui .plyr__video-embed { + $height: 240; + $offset: to-percentage(($height - $embed-padding) / ($height / 50)); + + // To allow mouse events to be captured if full support + iframe { + pointer-events: none; + } // Vimeo hack > div { @@ -30,7 +39,3 @@ transform: translateY(-$offset); } } -// To allow mouse events to be captured if full support -.plyr--full-ui .plyr__video-embed iframe { - pointer-events: none; -} |