diff --git a/app/__init__.py b/app/__init__.py
index 8b24a6623..6697fb7c4 100644
--- a/app/__init__.py
+++ b/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']
diff --git a/app/assets/stylesheets/components/vendor/responsive-embed.scss b/app/assets/stylesheets/components/vendor/responsive-embed.scss
new file mode 100644
index 000000000..aa3cfaab4
--- /dev/null
+++ b/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%;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 267c51afd..04900a42f 100644
--- a/app/assets/stylesheets/main.scss
+++ b/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';
diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html
index 335848b98..e3e40d4bb 100644
--- a/app/templates/views/signedout.html
+++ b/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>
diff --git a/tests/app/main/views/test_headers.py b/tests/app/main/views/test_headers.py
index 9f4ec9b80..8df61592a 100644
--- a/tests/app/main/views/test_headers.py
+++ b/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;"
     )