Merge pull request #1089 from alphagov/add-video-product-page

Add introducer video to the product page

app/__init__.py

@@ -379,6 +379,7 @@ def useful_headers_after_request(response):
         "object-src 'self';"
         "font-src 'self' data:;"
         "img-src 'self' *.google-analytics.com *.notifications.service.gov.uk data:;"
+        "frame-src www.youtube.com;"
     ))
     if 'Cache-Control' in response.headers:
         del response.headers['Cache-Control']

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';

app/templates/views/signedout.html

@@ -105,6 +105,16 @@
       </div>
     </div>
   </div>
+  <div class="product-page-section">
+    <h2 class="with-keyline">
+      Introducing GOV.UK Notify
+    </h2>
+    <div class="responsive-embed responsive-embed--16by9 responsive-embed--bordered bottom-gutter-2">
+      <div class="responsive-embed__wrapper">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/i2a2jiwYTd4" frameborder="0" allowfullscreen></iframe>
+      </div>
+    </div>
+  </div>
   <div class="product-page-section">
     <div class="with-keyline bottom-gutter-2">
       <h2>Who’s using GOV.UK Notify</h2>

tests/app/main/views/test_headers.py

@@ -12,4 +12,5 @@ def test_owasp_useful_headers_set(app_):
         "object-src 'self';"
         "font-src 'self' data:;"
         "img-src 'self' *.google-analytics.com *.notifications.service.gov.uk data:;"
+        "frame-src www.youtube.com;"
     )