cb8cb9b1a5
* Avoid CSS word wrap in video player duration * Trigger Travis CI Co-authored-by: rhymes <rhymes@hey.com>
47 lines
1.2 KiB
SCSS
47 lines
1.2 KiB
SCSS
@import 'variables';
|
|
@import '_mixins';
|
|
|
|
.crayons-article__video {
|
|
overflow-wrap: normal;
|
|
word-break: normal;
|
|
|
|
.crayons-article__video__player {
|
|
background-position: center;
|
|
background-size: cover;
|
|
padding-bottom: 56.25%;
|
|
|
|
&.native {
|
|
height: calc(100vw * (9 / 16)); // Maintain 16:9 ratio
|
|
}
|
|
|
|
img {
|
|
display: none;
|
|
width: calc(100vw * (9 / 16) * (1 / 2));
|
|
height: calc((100vw * (9 / 16) * (1 / 2)) + (100vw * (9 / 16) * (1 / 6)));
|
|
padding-top: calc(100vw * (9 / 16) * (1 / 6));
|
|
margin: 0 auto;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// All the calculations are kept exactly the same, except they're scaled
|
|
// down by (2/3). This because tablets use extra columns and the
|
|
// calculations are based on viewport size (the columns "don't count")
|
|
@media screen and (min-width: 640px) {
|
|
&.native {
|
|
height: calc(100vw * (9 / 16) * (2 / 3));
|
|
}
|
|
|
|
img {
|
|
width: calc(100vw * (9 / 16) * (1 / 2) * (2 / 3));
|
|
height: calc(
|
|
(100vw * (9 / 16) * (1 / 2) * (2 / 3)) +
|
|
(100vw * (9 / 16) * (1 / 6) * (2 / 3))
|
|
);
|
|
padding-top: calc(100vw * (9 / 16) * (1 / 6) * (2 / 3));
|
|
}
|
|
}
|
|
}
|
|
}
|