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 | }
|