]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // Credit: Nicolas Gallagher and SUIT CSS. |
2 | ||
3 | .embed-responsive { | |
4 | position: relative; | |
5 | display: block; | |
6 | width: 100%; | |
7 | padding: 0; | |
8 | overflow: hidden; | |
9 | ||
10 | &::before { | |
11 | display: block; | |
12 | content: ""; | |
13 | } | |
14 | ||
15 | .embed-responsive-item, | |
16 | iframe, | |
17 | embed, | |
18 | object, | |
19 | video { | |
20 | position: absolute; | |
21 | top: 0; | |
22 | bottom: 0; | |
23 | left: 0; | |
24 | width: 100%; | |
25 | height: 100%; | |
26 | border: 0; | |
27 | } | |
28 | } | |
29 | ||
30 | .embed-responsive-21by9 { | |
31 | &::before { | |
32 | padding-top: percentage(9 / 21); | |
33 | } | |
34 | } | |
35 | ||
36 | .embed-responsive-16by9 { | |
37 | &::before { | |
38 | padding-top: percentage(9 / 16); | |
39 | } | |
40 | } | |
41 | ||
42 | .embed-responsive-4by3 { | |
43 | &::before { | |
44 | padding-top: percentage(3 / 4); | |
45 | } | |
46 | } | |
47 | ||
48 | .embed-responsive-1by1 { | |
49 | &::before { | |
50 | padding-top: percentage(1 / 1); | |
51 | } | |
52 | } |