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.
<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
Thank you!