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