Add responsive embed helper classes for fluid-width videos. (#5)
Close #2
This commit is contained in:
parent
8d6aaa0f9d
commit
7a1993a672
|
@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|||
|
||||
## [Unreleased]
|
||||
### Added
|
||||
- Responsive embed helper classes for videos. [#2](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/2)
|
||||
- Print styles for improved readability of printed pages. [#4](https://github.com/mmistakes/jekyll-theme-basically-basic/pull/4)
|
||||
- Icon list to README.
|
||||
|
||||
|
|
|
@ -32,6 +32,7 @@
|
|||
@import 'basically-basic/navicons';
|
||||
@import 'basically-basic/contact-lists';
|
||||
@import 'basically-basic/syntax-highlighting';
|
||||
@import 'basically-basic/responsive-embed';
|
||||
|
||||
/* Utility classes */
|
||||
@import 'basically-basic/utilities';
|
||||
|
|
|
@ -0,0 +1,70 @@
|
|||
/* ==========================================================================
|
||||
Responsive Embed
|
||||
Credit: Nicolas Gallagher and SUIT CSS.
|
||||
|
||||
<!-- 16:9 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="..."></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 4:3 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="embed-responsive-item" src="..."></iframe>
|
||||
</div>
|
||||
========================================================================== */
|
||||
|
||||
.embed-responsive {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.embed-responsive-item,
|
||||
iframe,
|
||||
embed,
|
||||
object,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-21by9 {
|
||||
|
||||
&::before {
|
||||
padding-top: percentage(9 / 21);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-16by9 {
|
||||
|
||||
&::before {
|
||||
padding-top: percentage(9 / 16);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-4by3 {
|
||||
|
||||
&::before {
|
||||
padding-top: percentage(3 / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-1by1 {
|
||||
|
||||
&::before {
|
||||
padding-top: percentage(1 / 1);
|
||||
}
|
||||
}
|
|
@ -32,6 +32,7 @@
|
|||
@import 'basically-basic/navicons';
|
||||
@import 'basically-basic/contact-lists';
|
||||
@import 'basically-basic/syntax-highlighting';
|
||||
@import 'basically-basic/responsive-embed';
|
||||
|
||||
/* Utility classes */
|
||||
@import 'basically-basic/utilities';
|
||||
|
|
|
@ -0,0 +1,70 @@
|
|||
/* ==========================================================================
|
||||
Responsive Embed
|
||||
Credit: Nicolas Gallagher and SUIT CSS.
|
||||
|
||||
<!-- 16:9 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="..."></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 4:3 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="embed-responsive-item" src="..."></iframe>
|
||||
</div>
|
||||
========================================================================== */
|
||||
|
||||
.embed-responsive {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.embed-responsive-item,
|
||||
iframe,
|
||||
embed,
|
||||
object,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-21by9 {
|
||||
|
||||
&::before {
|
||||
padding-top: percentage(9 / 21);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-16by9 {
|
||||
|
||||
&::before {
|
||||
padding-top: percentage(9 / 16);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-4by3 {
|
||||
|
||||
&::before {
|
||||
padding-top: percentage(3 / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-1by1 {
|
||||
|
||||
&::before {
|
||||
padding-top: percentage(1 / 1);
|
||||
}
|
||||
}
|
|
@ -4,9 +4,25 @@ categories:
|
|||
- Post Formats
|
||||
tags:
|
||||
- Post Formats
|
||||
last_modified_at: 2017-03-09T12:58:20-05:00
|
||||
last_modified_at: 2017-03-23T15:33:37-04:00
|
||||
---
|
||||
|
||||
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&" frameborder="0" allowfullscreen></iframe>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
This post test YouTube video embeds.
|
||||
This post tests YouTube video embeds.
|
||||
|
||||
Simply wrap embeds with a `<div>` element and the appropriate classes:
|
||||
|
||||
```html
|
||||
<!-- 16:9 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="..."></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 4:3 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="embed-responsive-item" src="..."></iframe>
|
||||
</div>
|
||||
```
|
||||
|
|
Loading…
Reference in New Issue