added a custom youtube shortcode to solve the non-responsiveness of the default youtube embed iframe
commit69f8e863d7edc7ef9f0eaf37af80f0fa086dd54d
authorfriederjanmoerman <hijbrid@gmail.com>
dateThu 9 May 2019, 02:08 (7 years ago)
parent8241e1c
content/posts/epicenter-episode-205-urbit-a-digital-republic-reinventing-the-internet.md+1−1
@@ -6,6 +6,6 @@ description = "Galen discusses Urbit with Brian Fabian Crain and Meher Roy on th
66[taxonomies]
77posts = ["Media"]
88+++
9−{{ youtube(id="DFeN-TKZor0") }}
9+{{ youtube(id="DFeN-TKZor0") }}
1010
1111[\#205 Galen Wolfe-Pauly: Urbit - A Digital Republic Reinventing the Internet](https://epicenter.tv/episode/205/)
content/posts/lambdaconf-2018-ted-blackman-ford-urbits-build-system.md+1−1
@@ -6,6 +6,6 @@ description = "Ted presents a technical overview of Ford, Urbit's build system,
66[taxonomies]
77posts = ["Media"]
88+++
9−{{ youtube(id="5ZAFEylHdiU") }}
9+{{ youtube(id="5ZAFEylHdiU") }}
1010
1111[Ted Blackman Ford - Urbit's Build System - λC 2018](https://www.youtube.com/watch?v=5ZAFEylHdiU)
sass/_main.scss+15
@@ -158,6 +158,21 @@ iframe {
158158 margin-bottom: 7rem;
159159}
160160
161+.video-wrapper {
162+ position: relative;
163+ padding-bottom: 56.25%;
164+ height: 0;
165+}
166+
167+.video-wrapper iframe {
168+ position: absolute;
169+ top: 0;
170+ left: 0;
171+ width: 100%;
172+ height: 100%;
173+ border: none;
174+}
175+
161176/*
162177 * components
163178 */
templates/shortcodes/youtube.htmlnew file+8
@@ -0,0 +1,8 @@
1+<div class="video-wrapper">
2+ <iframe
3+ src="https://www.youtube.com/embed/{{id}}"
4+ webkitallowfullscreen
5+ mozallowfullscreen
6+ allowfullscreen>
7+ </iframe>
8+</div>