Articles on: coreFORCE Advanced & Enterprise

Video Banner

How to make a video banner?

You must upload the file to File Manager by navigating Website > File Manager > New Document.

Create a banner group called Video Banner (You can name it anything). Go to Website > Banners > Banner Groups.

Create a banner called Video Banner (You can name it anything). Go to Website > Banners > Banners and add this to the banner group you created above.

Insert this HTML element in the banner created.

<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline preload="auto">
  <source src="/download.php?code=VIDEO_BANNER_GUNSMITHING" type="video/mp4">
</video>

<div class="video-banner-content">
  <h1>Text Here Text Here Text Here</h1>
  <div class="button-container">
    <a href="" class="btn-primary">Button Here</a>
    <a href="" class="btn-primary">Button Here</a>
  </div>
</div>

Create a fragment called Widget - Video Banner. Go to Website > Fragments

Insert this content.

<style>
#_main_content {
  padding: 0;
}
.video-banner-container .banner {
  position: relative;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  background-position: center;
}
.video-banner-container .banner .banner-description {
  display: none;
}
.video-banner-container .banner img:not(.video-banner-content img) {
  display: none !important;
}
.video-banner-container .banner video {
    width: 100%;
    height: 40rem;
    object-fit: cover;
    object-position: top;
    margin-bottom: -8px;
}
.video-banner-container .video-banner-content {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  color: white;
  transform: translate(-50%, -50%);
}
.video-banner-container .video-banner-content img {
  max-width: 25rem;
  margin: 0 auto;
  display: block;
  width: 100%;
}
.video-banner-container .video-banner-content h2 {
  font-size: 4rem;
  line-height: 4rem;
  text-shadow: 0px 2px 4px #000;
}
.video-banner-container .video-banner-content .button-container {
  text-align: center;
  margin: 2rem 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.video-banner-container .video-banner-content .button-container a {
  flex: 0 1 auto;
}
@media screen and (max-width: 39.9375rem) {
  .video-banner-container .video-banner-content .button-container {
    flex-direction: column;
  }
  .video-banner-container .banner video {
    height: 25rem;
  }
  .video-banner-container .video-banner-content {
    width: 90%;
  }
  .video-banner-container .video-banner-content img {
      max-width: 15rem;
    }
  .video-banner-container .video-banner-content h2 {
    font-size: 3rem;
    line-height: 3rem;
  }
}

@media screen and (min-width: 40rem) and (max-width: 61.9375rem) {
  .video-banner-container .banner img:not(.video-banner-content img) {
    height: 35rem;
  }
}
@media only screen and (min-width: 1450px) {
  .video-banner-container .banner img:not(.video-banner-content img) {
    height: 40rem;
  }
}
@media only screen and (max-width: 320px) {
  .video-banner-container .banner img:not(.video-banner-content img) {
    height: 25rem;
    -o-object-fit: initial;
       object-fit: initial;
  }
}

</style>

<div class="video-banner-container">
    %module:banner_group:banner_group_code=%banner_group%%
</div>

<script>
   $(function () {
    // Expandable video 
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
      if (isMobile) {
        setTimeout(() => {
            var outerHeight = $('.video-banner-container').find('.video-banner-content').outerHeight();
            if (outerHeight > 280) {
                $(".video-banner-container video").css("height", outerHeight  + 200);
            }
        }, "1000");

      }

    $(window).resize(function () {
      if (isMobile) {
        var outerHeight = $('.video-banner-container').find('.video-banner-content').outerHeight();
        if (outerHeight > 280) {
            $(".video-banner-container video").css("height", outerHeight  + 200);
        }
      }
    });
</script>

Go to the page where you want to display the banner and add this code.

%module:fragment:WIDGET_VIDEO_BANNER:banner_group=VIDEO_BANNER%

Updated on: 09/18/2024

Was this article helpful?

Thank you!