Display Banner on Mobile instead of Hero Video

As an administrator using the Full HTML editor add the following styles to the page along with the path to the Hero Video and the Tagline. You may need to unhide those two fields in Basic Page form display settings.

 

<style type="text/css">.path-frontpage .paragraph.paragraph--type--banner.banner--top {
  display: none;
}
@media screen and (max-width: 768px) {
  .path-frontpage .paragraph.paragraph--type--banner.banner--top {
    display: table;
  }
  .path-frontpage .hero-container {
    display: none;
  }
}
</style>

Complexity
Advanced