Skip to content

Commit 7a1993a

Browse files
mmistakesmmistakes
authored
Add responsive embed helper classes for fluid-width videos. (#5)
Close #2
1 parent 8d6aaa0 commit 7a1993a

File tree

6 files changed

+162
-3
lines changed

6 files changed

+162
-3
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
77

88
## [Unreleased]
99
### Added
10+
- Responsive embed helper classes for videos. [#2](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/2)
1011
- Print styles for improved readability of printed pages. [#4](https://github.com/mmistakes/jekyll-theme-basically-basic/pull/4)
1112
- Icon list to README.
1213

‎_sass/basically-basic.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@import 'basically-basic/navicons';
3333
@import 'basically-basic/contact-lists';
3434
@import 'basically-basic/syntax-highlighting';
35+
@import 'basically-basic/responsive-embed';
3536

3637
/* Utility classes */
3738
@import 'basically-basic/utilities';

‎_sass/basically-basic/_responsive-embed.scss

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* ==========================================================================
2+
Responsive Embed
3+
Credit: Nicolas Gallagher and SUIT CSS.
4+
5+
<!-- 16:9 aspect ratio -->
6+
<div class="embed-responsive embed-responsive-16by9">
7+
<iframe class="embed-responsive-item" src="..."></iframe>
8+
</div>
9+
10+
<!-- 4:3 aspect ratio -->
11+
<div class="embed-responsive embed-responsive-4by3">
12+
<iframe class="embed-responsive-item" src="..."></iframe>
13+
</div>
14+
========================================================================== */
15+
16+
.embed-responsive {
17+
display: block;
18+
position: relative;
19+
width: 100%;
20+
margin-bottom: 1.5rem;
21+
padding: 0;
22+
overflow: hidden;
23+
24+
&::before {
25+
display: block;
26+
content: '';
27+
}
28+
29+
.embed-responsive-item,
30+
iframe,
31+
embed,
32+
object,
33+
video {
34+
position: absolute;
35+
top: 0;
36+
bottom: 0;
37+
left: 0;
38+
width: 100%;
39+
height: 100%;
40+
border: 0;
41+
}
42+
}
43+
44+
.embed-responsive-21by9 {
45+
46+
&::before {
47+
padding-top: percentage(9 / 21);
48+
}
49+
}
50+
51+
.embed-responsive-16by9 {
52+
53+
&::before {
54+
padding-top: percentage(9 / 16);
55+
}
56+
}
57+
58+
.embed-responsive-4by3 {
59+
60+
&::before {
61+
padding-top: percentage(3 / 4);
62+
}
63+
}
64+
65+
.embed-responsive-1by1 {
66+
67+
&::before {
68+
padding-top: percentage(1 / 1);
69+
}
70+
}

‎docs/_sass/basically-basic.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@import 'basically-basic/navicons';
3333
@import 'basically-basic/contact-lists';
3434
@import 'basically-basic/syntax-highlighting';
35+
@import 'basically-basic/responsive-embed';
3536

3637
/* Utility classes */
3738
@import 'basically-basic/utilities';

‎docs/_sass/basically-basic/_responsive-embed.scss

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* ==========================================================================
2+
Responsive Embed
3+
Credit: Nicolas Gallagher and SUIT CSS.
4+
5+
<!-- 16:9 aspect ratio -->
6+
<div class="embed-responsive embed-responsive-16by9">
7+
<iframe class="embed-responsive-item" src="..."></iframe>
8+
</div>
9+
10+
<!-- 4:3 aspect ratio -->
11+
<div class="embed-responsive embed-responsive-4by3">
12+
<iframe class="embed-responsive-item" src="..."></iframe>
13+
</div>
14+
========================================================================== */
15+
16+
.embed-responsive {
17+
display: block;
18+
position: relative;
19+
width: 100%;
20+
margin-bottom: 1.5rem;
21+
padding: 0;
22+
overflow: hidden;
23+
24+
&::before {
25+
display: block;
26+
content: '';
27+
}
28+
29+
.embed-responsive-item,
30+
iframe,
31+
embed,
32+
object,
33+
video {
34+
position: absolute;
35+
top: 0;
36+
bottom: 0;
37+
left: 0;
38+
width: 100%;
39+
height: 100%;
40+
border: 0;
41+
}
42+
}
43+
44+
.embed-responsive-21by9 {
45+
46+
&::before {
47+
padding-top: percentage(9 / 21);
48+
}
49+
}
50+
51+
.embed-responsive-16by9 {
52+
53+
&::before {
54+
padding-top: percentage(9 / 16);
55+
}
56+
}
57+
58+
.embed-responsive-4by3 {
59+
60+
&::before {
61+
padding-top: percentage(3 / 4);
62+
}
63+
}
64+
65+
.embed-responsive-1by1 {
66+
67+
&::before {
68+
padding-top: percentage(1 / 1);
69+
}
70+
}

‎example/_posts/2010-06-02-post-video-youtube.md

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,25 @@ categories:
44
- Post Formats
55
tags:
66
- Post Formats
7-
last_modified_at: 2017-03-09T12:58:20-05:00
7+
last_modified_at: 2017-03-23T15:33:37-04:00
88
---
99

10-
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;" frameborder="0" allowfullscreen></iframe>
10+
<div class="embed-responsive embed-responsive-16by9">
11+
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;" frameborder="0" allowfullscreen></iframe>
12+
</div>
1113

12-
This post test YouTube video embeds.
14+
This post tests YouTube video embeds.
15+
16+
Simply wrap embeds with a `<div>` element and the appropriate classes:
17+
18+
```html
19+
<!-- 16:9 aspect ratio -->
20+
<div class="embed-responsive embed-responsive-16by9">
21+
<iframe class="embed-responsive-item" src="..."></iframe>
22+
</div>
23+
24+
<!-- 4:3 aspect ratio -->
25+
<div class="embed-responsive embed-responsive-4by3">
26+
<iframe class="embed-responsive-item" src="..."></iframe>
27+
</div>
28+
```

0 commit comments

Comments
 (0)