Add videos section to resources

website/_harp.json

@@ -82,7 +82,7 @@
             }
         ],
 
-        "V_CSS": "2.0.0",
+        "V_CSS": "2.0.1",
         "V_JS": "2.0.1",
         "DEFAULT_SYNTAX": "python",
         "ANALYTICS": "UA-58931649-1",

website/_includes/_mixins.jade

@@ -312,6 +312,14 @@ mixin github(repo, file, height, alt_file, language)
                 +button(gh(repo, alt_file || file), false, "primary", "small") View on GitHub
 
 
+//- Youtube video embed
+    id    - [string] ID of YouTube video.
+    ratio - [string] Video ratio, "16x9" or "4x3".
+
+mixin youtube(id, ratio)
+    figure.o-video.o-block(class="o-video--" + (ratio || "16x9"))
+        iframe.o-video__iframe(src="https://www.youtube.com/embed/#{id}" frameborder="0" height="500" allowfullscreen)
+
 
 //- Images / figures
     url     - [string] url or path to image

website/assets/css/_base/_objects.sass

@@ -177,6 +177,22 @@
     border-radius: $border-radius
 
 
+//- Responsive Video embeds
+
+.o-video
+    position: relative
+    height: 0
+
+    @each $ratio1, $ratio2 in (16, 9), (4, 3)
+        &.o-video--#{$ratio1}x#{$ratio2}
+            padding-bottom: (100% * $ratio2 / $ratio1)
+
+.o-video__iframe
+    @include position(absolute, top, left, 0, 0)
+    @include size(100%)
+    border-radius: var(--border-radius)
+
+
 //- Form fields
 
 .o-field

website/usage/_data.json

@@ -166,6 +166,7 @@
             "Demos & Visualizations": "demos",
             "Books & Courses": "books",
             "Jupyter Notebooks": "notebooks",
+            "Videos": "videos",
             "Research": "research"
         }
     },

website/usage/resources.jade

@@ -114,6 +114,11 @@ include ../_includes/_mixins
     .u-text-right
         +button(gh("spacy-notebooks"), false, "primary", "small") See more notebooks on GitHub
 
++section("videos")
+    +h(2, "videos") Videos
+
+    +youtube("sqDHBH9IjRU")
+
 +section("research")
     +h(2, "research") Research systems