ry
/
datat.fi
6
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add responsive embed helper classes for fluid-width videos. (#5) 

Close #2
This commit is contained in:
Michael Rose 2017-03-23 15:46:54 -04:00 committed by GitHub
parent 8d6aaa0f9d
commit 7a1993a672
6 changed files with 162 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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.

1
_sass/basically-basic.scss
View File

@ -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';

70
_sass/basically-basic/_responsive-embed.scss Normal file
View File

@ -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);
}
}

1
docs/_sass/basically-basic.scss
View File

@ -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';

70
docs/_sass/basically-basic/_responsive-embed.scss Normal file
View File

@ -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);
}
}

20
example/_posts/2010-06-02-post-video-youtube.md
View File

@ -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
---
<div class="embed-responsive embed-responsive-16by9">
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;" 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>
```