docs: fix video play button browser compatibility (#1640)

website/src/components/video-embed.js

@@ -2,6 +2,20 @@ import React, { Component } from 'react';
 
 import screenshotEditor from '../img/screenshot-editor.jpg';
 
+/**
+ * We should be able to import complete inline svg's rather than base64, this
+ * component is a stopgap for now. Source in '../img/play.svg'.
+ */
+const PlayIcon = ({ className }) => (
+  <svg className={className} viewBox="0 0 43 44">
+    <path
+      d="M41.5156904,23.7808694 L2.91022212,43.5125531 C1.92667513,44.0152549 0.721832431,43.6254529 0.219130636,42.6419059 C0.07510106,42.3601089 -3.51395713e-15,42.048155 -3.55271368e-15,41.7316838 L-1.77635684e-15,2.26831623 C-2.40215499e-15,1.16374673 0.8954305,0.268316226 2,0.268316226 C2.31647127,0.268316226 2.62842512,0.343417285 2.91022212,0.487446861 L41.5156904,20.2191306 C42.4992374,20.7218324 42.8890394,21.9266751 42.3863376,22.9102221 C42.1949001,23.2847739 41.8902421,23.5894318 41.5156904,23.7808694 Z"
+      id="Triangle"
+      fillRule="nonzero"
+    />
+  </svg>
+);
+
 class VideoEmbed extends Component {
   state = {
     toggled: false,
@@ -30,7 +44,11 @@ class VideoEmbed extends Component {
     return (
       <a className="hero-graphic" onClick={this.toggleVideo}>
         {toggled ? embedcode : imgPlaceholder}
-        {!toggled && <div className="hero-videolink">&#x25b6;</div>}
+        {!toggled && (
+          <div className="hero-videolink">
+            <PlayIcon className="hero-videolink-arrow" />
+          </div>
+        )}
       </a>
     );
   }

website/src/css/imports/hero.css

@@ -119,23 +119,30 @@
       right: 0;
       width: 90px;
       height: 90px;
-      font-size: 64px;
-      font-weight: $semibold;
-      text-align: center;
       color: $blue;
       background-color: rgba(255, 255, 255, 0.85);
       box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
       border-radius: 100px;
       transition: 0.1s;
     }
+    .hero-videolink-arrow {
+      position: absolute;
+      left: 33px;
+      top: 28px;
+      width: 44px;
+      height: 44px;
+      fill: #3a69c7;
+    }
 
     &:hover {
       .hero-videolink {
-        color: white;
         background-color: $blue;
         box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15), 0 2px 6px 0 rgba(0, 0, 0, 0.3);
         transform: scale(1.1);
       }
+      .hero-videolink-arrow {
+        fill: #fff;
+      }
     }
 
     &:active {

website/src/img/play.svg

@@ -0,0 +1,3 @@
+<svg width="43px" height="44px" viewBox="0 0 43 44">
+    <path d="M41.5156904,23.7808694 L2.91022212,43.5125531 C1.92667513,44.0152549 0.721832431,43.6254529 0.219130636,42.6419059 C0.07510106,42.3601089 -3.51395713e-15,42.048155 -3.55271368e-15,41.7316838 L-1.77635684e-15,2.26831623 C-2.40215499e-15,1.16374673 0.8954305,0.268316226 2,0.268316226 C2.31647127,0.268316226 2.62842512,0.343417285 2.91022212,0.487446861 L41.5156904,20.2191306 C42.4992374,20.7218324 42.8890394,21.9266751 42.3863376,22.9102221 C42.1949001,23.2847739 41.8902421,23.5894318 41.5156904,23.7808694 Z"></path>
+</svg>