Putting the video container in a div solves the size problem

Add CSS for video container
Switch to Jekyll video tag
2025-03-04 08:59:10 +00:00 · 2019-06-23 21:02:25 -04:00 · 2019-06-23 17:51:08 -04:00 · 2019-06-23 17:16:06 -04:00 · 2019-06-23 17:07:05 -04:00
3 changed files with 33 additions and 0 deletions
--- a/_assets/stylesheets/components/_video-container.scss
+++ b/_assets/stylesheets/components/_video-container.scss
@ -0,0 +1,11 @@
+.video-container {
+  position: relative;
+  width: 100%;
+  height: 0;
+  
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}
--- a/_assets/stylesheets/styles.scss
+++ b/_assets/stylesheets/styles.scss
@ -41,6 +41,7 @@
@import "components/article";
@import "components/pagination";
@import "components/photo";
+@import "components/video-container";

 // 7. Utilities – utilities and helper classes with ability to override
 //    anything which goes before in the triangle, eg. hide helper class
--- a/_posts/2019-06-23-bwc.md
+++ b/_posts/2019-06-23-bwc.md
@ -0,0 +1,21 @@
+---
+title: "Brompton World Championship USA 2019"
+layout: post
+categories:
+  - videos
+tags:
+  - bikes
+  - fun
+  - brompton
+  - bwc
+  - New York
+date: 2019-06-23
+---
+
+The Brompton World Championship USA heat took place at Marcus Garvey Park in Harlem, New York. I shot a video of the race from a GoPro mounted to the front of my Brompton.
+
+<div>
+  {% video //www.youtube.com/embed/gU4XDks4yC4 width=560 height=315 %}
+</div>
+
+I managed to place 22nd overall and 12th in the men under 50 category.
Author	SHA1	Message	Date
Daniel Barber	402a8e4f47	Putting the video container in a div solves the size problem	2019-06-23 21:02:25 -04:00
Daniel Barber	8a776cd9e2	Add CSS for video container	2019-06-23 17:51:08 -04:00
Daniel Barber	18ed1e19d7	Switch to Jekyll video tag	2019-06-23 17:16:06 -04:00
Daniel Barber	787f7a7542	Add BWC video post	2019-06-23 17:07:05 -04:00