Embedded Video
Example
3-up
5-up
Video with quote
Code
HTML
<div class="embedded-video single">
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
<br />
<p>3-up</p>
<div class="embedded-video three-up">
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
<br />
<p>5-up</p>
<div class="embedded-video three-up">
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
<div class="embedded-video two-up">
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
<p>Video with quote</p>
<div class="embedded-video two-up with-quote">
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FK3dav4bA4s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="video quote">
<figure>
<blockquote>
<p>
I thank UM-Dearborn for giving me the opportunity to blossom and
become the person I am meant to be.<span class="end-quote"
>”</span
>
</p>
</blockquote>
<figcaption>–Bianca Khatibshahidi, ‘18 Psychology</figcaption>
</figure>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
CSS
.embedded-video {
margin-bottom: 1.125rem;
}
.embedded-video .video {
padding-bottom: 56.25%;
position: relative;
height: 0;
margin-bottom: 1rem;
overflow: hidden;
}
.embedded-video.two-up .video {
padding-bottom: 27.5%;
}
.embedded-video.two-up.with-quote .video.quote {
height: auto;
padding-bottom: 0;
}
.embedded-video.three-up .video {
padding-bottom: 18.25%;
}
.embedded-video iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.embedded-video.two-up,
.embedded-video.three-up {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.embedded-video.two-up .video {
width: 49%;
}
.embedded-video.three-up .video {
width: 32%;
}
.embedded-video.with-quote blockquote .end-quote {
font-family: 'Montserrat', sans-serif;
font-size: 3.125rem;
font-style: italic;
font-weight: 600;
color: rgba(0, 39, 76, 0.7);
text-align: left;
line-height: 3rem;
}
.embedded-video.with-quote figure {
margin: 0 0 0 2rem;
}
.embedded-video.with-quote blockquote {
border: 0;
color: #00274c;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-style: italic;
font-weight: 400;
letter-spacing: 0.22px;
line-height: 3rem;
margin: 0;
padding: 0;
position: relative;
quotes: '“' '”' '‘' '’';
}
.embedded-video.with-quote blockquote p {
margin-bottom: 0;
}
.embedded-video.with-quote blockquote:before {
content: open-quote;
font-family: 'Montserrat', sans-serif;
font-size: 3.125rem;
font-style: italic;
font-weight: 600;
color: rgba(0, 39, 76, 0.7);
display: inline;
text-align: left;
left: -1.75rem;
line-height: 3rem;
position: absolute;
}
.embedded-video.with-quote figcaption {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.875rem;
color: rgba(0, 0, 0, 0.6);
letter-spacing: 0.66px;
text-align: right;
text-transform: uppercase;
}
@media screen and (max-width: 39.9375em) {
.embedded-video.two-up,
.embedded-video.three-up {
display: block;
padding-bottom: 56.25%;
position: relative;
height: 0;
margin-bottom: 1rem;
overflow: hidden;
}
.embedded-video.two-up .video iframe,
.embedded-video.three-up .video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.embedded-video.two-up .video,
.embedded-video.three-up .video {
margin-bottom: 1rem;
max-width: 100%;
padding-bottom: 56.25%;
width: 100%;
}
.embedded-video.with-quote .video {
height: auto;
padding-bottom: 0;
}
.embedded-video.with-quote {
height: auto;
overflow: visible;
padding-bottom: 0;
position: static;
}
.embedded-video.with-quote.two-up .video iframe {
position: static;
}
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.embedded-video.with-quote .video {
height: auto;
padding-bottom: 0;
width: 100%;
}
.embedded-video.with-quote {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
overflow: visible;
padding-bottom: 0;
position: static;
}
.embedded-video.with-quote.two-up .video iframe {
height: 277px;
position: static;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
Usage
This one is acting a bit funny on 2-up ... Am rethinking and rebuilding. Something something aspect ratios.