Actions video (github#16744)

* Support video frontmatter

* Add CSP rule

* Actually put in the video

content/actions/index.md

@@ -37,6 +37,8 @@ changelog:
   - title: Self-Hosted Runner Group Access Changes
     date: '2020-10-16'
     href: https://github.blog/changelog/2020-10-16-github-actions-self-hosted-runner-group-access-changes/
+
+product_video: https://www.youtube-nocookie.com/embed/cP0I9w2coGU
 
 redirect_from:
   - /articles/automating-your-workflow-with-github-actions/

layouts/product-landing.html

@@ -9,8 +9,8 @@
       {% include header %}
 
       <div class="container-xl px-3 px-md-6 pt-3 pb-2">
-        <header class="d-flex gutter mb-6">
-          <div class="col-12 col-lg-7">
+        <header class="d-lg-flex gutter-lg mb-6">
+          <div class="col-12 col-lg-6 mb-2 mb-lg-0">
             <span class="text-mono text-gray">Product</span>
             <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
             <div class="lead-mktg text-gray">{{ page.intro }}</div>
@@ -23,6 +23,19 @@ <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
               {% data ui.product_landing.reference_guides %}
             </a>
           </div>
+
+          {% if page.product_video %}
+            <div class="col-12 col-lg-6">
+              <div class="position-relative" style="padding-bottom:56.25%;">
+                <iframe
+                  class="top-0 left-0 position-absolute box-shadow-large rounded-1 width-full height-full"
+                  src="{{ page.product_video }}"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
+                ></iframe>
+              </div>
+            </div>
+          {% endif %}
         </header>
 
         <!-- Article links -->

lib/frontmatter.js

@@ -88,6 +88,11 @@ const schema = {
         }
       }
     },
+    // Show in `product-landing.html`
+    product_video: {
+      type: 'string',
+      format: 'url'
+    },
     interactive: {
       type: 'boolean'
     }

middleware/csp.js

@@ -34,7 +34,8 @@ module.exports = contentSecurityPolicy({
     ],
     frameSrc: [ // exceptions for GraphQL Explorer
       'https://graphql-explorer.githubapp.com', // production env
-      'http://localhost:3000' // development env
+      'http://localhost:3000', // development env
+      'https://www.youtube-nocookie.com'
     ],
     styleSrc: [
       "'self'",