1 | /* MEDIA CSS */
|
2 | /* Handles images, videos, figures, etc */
|
3 |
|
4 | video.video-fullscreen {
|
5 | position: absolute;
|
6 | height: 100vh;
|
7 | object-fit: cover;
|
8 | width: 100%;
|
9 | z-index: -1;
|
10 | }
|
11 |
|
12 | .hero.fullscreen video {
|
13 | height: 100%;
|
14 | object-fit: fill;
|
15 | position: absolute;
|
16 | width: 100%;
|
17 | z-index: -1;
|
18 | }
|
19 |
|
20 | /* Add to parent container to make media child fill container */
|
21 | .media-stretch {
|
22 | display: block;
|
23 | padding: 0;
|
24 | overflow: hidden;
|
25 | width: 100%;
|
26 | position: relative;
|
27 |
|
28 | /* Add pseudoclass to allow media to have height (default height is 0) */
|
29 | &::before {
|
30 | content: "";
|
31 | display: block;
|
32 | padding-bottom: 56.25%; /* 9 / 16 for 16:9 ratio */
|
33 | }
|
34 |
|
35 | /* Force media embed to fill parent container */
|
36 | iframe,
|
37 | embed,
|
38 | object {
|
39 | position: absolute;
|
40 | top: 0;
|
41 | right: 0;
|
42 | bottom: 0;
|
43 | left: 0;
|
44 | width: 100%; /* Make sure media does exceed or go under boundary limit */
|
45 | height: 100%;
|
46 | }
|
47 |
|
48 | /* Alternate media ratios */
|
49 | &.rat-4-3::before {
|
50 | padding-bottom: 75%;
|
51 | }
|
52 |
|
53 | &.rat-1-1::before {
|
54 | padding-bottom: 100%;
|
55 | }
|
56 |
|
57 | /* For HTML5 video objects */
|
58 | video {
|
59 | height: auto;
|
60 | max-width: 100%;
|
61 | width: 100%;
|
62 | }
|
63 | }
|
64 | /* FIGURES */
|
65 | /* For flexible media display */
|
66 | .fig {
|
67 | margin: 0 0 0.5rem 0; /* Small margin at the bottom */
|
68 |
|
69 | .fig-caption {
|
70 | margin-top: 1rem;
|
71 | }
|
72 | }
|
73 |
|
74 | /* IMAGES */
|
75 | .img-stretch {
|
76 | max-width: 100%;
|
77 | height: auto;
|
78 | display: block;
|
79 | }
|
80 |
|
81 | .img-cover {
|
82 | object-fit: cover;
|
83 | }
|
84 |
|
85 | .img-contain {
|
86 | object-fit: contain;
|
87 | } |
\ | No newline at end of file |