fix(homepage video): update mobile video (#451)

- Set placeholder for desktop video
- Replace old video with new one on mobile
- minor style adjustments on the homepage

Resolves #447

Author: danielgolden

src/images/video-placeholder-1.png

@@ -14,6 +14,7 @@
 }
 
 .homepage-hero-heading {
+  margin-top: 10px;
   font-family: var(--secondary-font-family);
   font-style: normal;
   font-weight: normal;
@@ -420,6 +421,7 @@ img.play-button {
 
   .featured-internal-projects-section-title {
     margin-bottom: 4px;
+    text-align: center;
   }
 }
 
@@ -503,7 +505,7 @@ img.play-button {
   }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width:xzF 480px) {
   .hero-container {
     margin-top: 24px;
   }
@@ -514,7 +516,7 @@ img.play-button {
   }  
 
   .homepage-hero-heading {
-    font-size: 32px;
+    font-size: 30px;
   }
 
   .homepage-hero-body-copy {

src/pages/home-page.module.scss

@@ -10,7 +10,7 @@ import HomePageHighlights from '../components/HomePageHighlights';
 import HomePageInternalProjects from '../components/HomePageInternalProjects';
 import styles from './home-page.module.scss';
 
-import videoPlaceholder from '../images/video-placeholder.jpg';
+import videoPlaceholder from '../images/video-placeholder-1.png';
 import playButton from '../images/button-play.svg';
 import closeIcon from '../images/icon-close.svg';
 
@@ -100,12 +100,15 @@ const HomePage = ({ data }) => {
         <div className={styles.responsiveVideoContainer}>
           <div className={`responsive-video ${styles.responsiveVideo}`}>
             <iframe
-              width="560"
-              height="315"
-              src="https://www.youtube.com/embed/7wnav6Fu9T0"
+              className={styles.heroVideoIframe}
+              width="1000"
+              height="562.704471"
+              src={`https://fast.wistia.net/embed/iframe/qc7gkrlltt?videoFoam=true${
+                heroVideoActive ? `&autoplay=1` : ''
+              }`}
               frameBorder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
+              allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; showinfo; modestbranding"
+              placeholder=""
             />
           </div>
         </div>