From 04bb4d99ac559ec8250a627caf4e133c461faa92 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Sat, 7 Mar 2020 00:00:43 -0800
Subject: [PATCH 1/2] autoplay via JS & code improvement

---
 .../templates/fragments/hero/large.html       |  2 +-
 source/js/mozfest-event-handlers.js           | 38 +++++++++----------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/large.html b/network-api/networkapi/mozfest/templates/fragments/hero/large.html
index e5cab4d898d..284134ee518 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/large.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/large.html
@@ -3,7 +3,7 @@
 <div class="background-wrapper">
   <div class="overlay"></div>
   {% if banner_video_type == "hardcoded" %}
-    <video class="banner-video" playsinline autoplay muted loop preload poster="" >
+    <video class="banner-video" playsinline muted loop preload poster="" >
       <source
         src="https://s3.amazonaws.com/mofo-assets/foundation/video/mozfest-banner-video.mp4"
         type="video/mp4">
diff --git a/source/js/mozfest-event-handlers.js b/source/js/mozfest-event-handlers.js
index dc8c18fcca7..caf7dc76f39 100644
--- a/source/js/mozfest-event-handlers.js
+++ b/source/js/mozfest-event-handlers.js
@@ -14,39 +14,35 @@ const bindHomeBannerHandlers = () => {
   let playButton = homepageBanner.querySelector(".btn-video-control.btn-play");
 
   if (video && pauseButton && playButton) {
-    let showVideoControls = () => {
-      const classToToggle = `d-none`;
-      let autoplayStarted =
-        video.played.length == 0 && video.readyState >= video.HAVE_FUTURE_DATA;
-
-      if (video.readyState < video.HAVE_FUTURE_DATA) {
-        // don't show any video controls as the video isn't ready to play
-        playButton.classList.add(classToToggle);
-        pauseButton.classList.add(classToToggle);
-      } else if (!video.paused || autoplayStarted) {
-        playButton.classList.add(classToToggle);
-        pauseButton.classList.remove(classToToggle);
-      } else {
-        pauseButton.classList.add(classToToggle);
-        playButton.classList.remove(classToToggle);
-      }
+    const HIDE = `d-none`;
+
+    const showPauseButton = () => {
+      playButton.classList.add(HIDE);
+      pauseButton.classList.remove(HIDE);
+    };
+
+    const showPlayButton = () => {
+      pauseButton.classList.add(HIDE);
+      playButton.classList.remove(HIDE);
     };
 
     pauseButton.addEventListener(`click`, () => {
       video.pause();
-      showVideoControls();
     });
 
     playButton.addEventListener(`click`, () => {
       video.play();
-      showVideoControls();
     });
 
-    showVideoControls();
+    video.addEventListener(`pause`, () => {
+      showPlayButton();
+    });
 
-    video.addEventListener(`canplay`, () => {
-      showVideoControls();
+    video.addEventListener(`playing`, () => {
+      showPauseButton();
     });
+
+    video.play();
   }
 };
 

From 812641bd99df4a629283c496f879f0118034b78a Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Mon, 9 Mar 2020 11:25:30 -0700
Subject: [PATCH 2/2] fix misaligned banner text on small screens

---
 .../mozfest/templates/mozfest/mozfest_homepage.html         | 1 +
 source/sass/mozfest.scss                                    | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html b/network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html
index 4d928c8df9c..ea18985225e 100644
--- a/network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html
+++ b/network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html
@@ -4,6 +4,7 @@
 {% block page_title %}{{page.title}}{% endblock%}
 
 {% block mozfest_body_id %}home{% endblock %}
+{% block bodyclass %}mozfest {% if banner_video_type %}banner-type-{{banner_video_type}}{% endif %}{% endblock %}
 
 {% block hero_guts %}
   {% include "partials/primary_heroguts.html" with root=root page=page homepage=True banner_video_type=banner_video_type %}
diff --git a/source/sass/mozfest.scss b/source/sass/mozfest.scss
index 0f6fd4e6f65..f7fc1cd4de5 100644
--- a/source/sass/mozfest.scss
+++ b/source/sass/mozfest.scss
@@ -78,9 +78,13 @@ body.mozfest {
         }
       }
 
-      .homepage-banner-content {
+      .homepage-banner-content.container {
         z-index: $banner-background-z-index + 3;
 
+        @media screen and (max-width: $bp-sm) {
+          width: 100%;
+        }
+
         @media screen and (min-width: $bp-md) {
           padding-bottom: $cutoff-offset;
         }