Add YouTube and Vimeo video embed support
This commit is contained in:
parent
7dc8953055
commit
6834509275
|
@ -0,0 +1,9 @@
|
|||
{% comment %}
|
||||
Include Vimeo videos inside your post like so:
|
||||
{% include vimeo.html id="142316610" aspect="16x9" %}
|
||||
Note, the aspect ratio is optional (defaults to 16x9).
|
||||
{% endcomment %}
|
||||
|
||||
<div class="embed-responsive aspect-ratio-{{ include.aspect | default: "16x9" }}">
|
||||
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/{{ include.id }}" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
|
||||
</div>
|
|
@ -0,0 +1,9 @@
|
|||
{% comment %}
|
||||
Include YouTube videos inside your post like so:
|
||||
{% include youtube.html id="oHg5SJYRHA0" aspect="4x3" %}
|
||||
Note, the aspect ratio is optional (defaults to 16x9).
|
||||
{% endcomment %}
|
||||
|
||||
<div class="embed-responsive aspect-ratio-{{ include.aspect | default: "16x9" }}">
|
||||
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{ include.id }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
|
@ -0,0 +1,38 @@
|
|||
////////////////////
|
||||
// Responsive Embeds
|
||||
////////////////////
|
||||
|
||||
.embed-responsive {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.embed-responsive-item,
|
||||
iframe,
|
||||
embed,
|
||||
object,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Aspect ratios
|
||||
.aspect-ratio-1x1 {
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.aspect-ratio-16x9 {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.aspect-ratio-4x3 {
|
||||
padding-top: 75%;
|
||||
}
|
|
@ -22,6 +22,7 @@
|
|||
@import "utilities/spacing";
|
||||
@import "utilities/images";
|
||||
@import "utilities/position";
|
||||
@import "utilities/embeds";
|
||||
|
||||
@import "component/button";
|
||||
@import "component/navigation";
|
||||
|
|
Loading…
Reference in New Issue