Add introducer video to the product page

It’s always been the plan to put this video on the product page. Just
getting round to it now.

Watch the video here: https://www.youtube.com/watch?v=i2a2jiwYTd4

Uses the CSS developed by the service manual team, taken from here:
a5c613f07b/source/stylesheets/modules/_responsive-embed.scss

app/assets/stylesheets/components/vendor/responsive-embed.scss

@@ -0,0 +1,60 @@
+/**
+ * Responsive Embed Component
+ *
+ * Notes:
+ *
+ * - Ensure you use either responsive-embed--16by9 or responsive-embed--4by3
+ *   depending on the aspect ratio of your embed.
+ * - Credit: Nicolas Gallagher and SUIT CSS.
+ *
+ * Example Usage:
+ *
+ * <div class="responsive-embed responsive-embed--4by3 responsive-embed--bordered">
+ *   <div class="responsive-embed__wrapper">
+ *     <iframe width="560" height="315" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" frameborder="0" allowfullscreen=""></iframe>
+ *   </div>
+ * </div>
+ */
+
+.responsive-embed {
+  .responsive-embed__wrapper {
+    position: relative;
+    display: block;
+    height: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .responsive-embed__item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+}
+
+.responsive-embed--bordered {
+  padding: 5px;
+  outline: 1px solid $border-colour;
+}
+
+// Modifier class for 16:9 aspect ratio
+.responsive-embed--16by9 {
+  .responsive-embed__wrapper {
+    padding-bottom: 56.25%;
+  }
+}
+
+// Modifier class for 4:3 aspect ratio
+.responsive-embed--4by3 {
+  .responsive-embed__wrapper {
+    padding-bottom: 75%;
+  }
+}

app/assets/stylesheets/main.scss

@@ -60,6 +60,7 @@ $path: '/static/images/';
 @import 'components/list-entry';
 @import 'components/letter';
 @import 'components/vendor/breadcrumbs';
+@import 'components/vendor/responsive-embed';
 
 @import 'views/job';
 @import 'views/edit-template';