Banner With Video

Recommended Banner Size: 1859x500px and 390x270px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.

To show Banner With Video on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.

In field HTML block:

When you are happy with your changes, don't forget click Save HTML and Publish to repackage the edited theme.

After that, input sample content below:

<div class="halo-block halo-home-section" id="popularBrands">
    <div class="popularBrands--header" data-halo-load="animation">
        <div class="popularBrands--heading pos-relative text-center halo-fadeInUp" data-halo-animate="0">
            <h3 class="page-heading">Agaro Performance</h3>
            <p class="description">In an increasingly digital world, sometimes you need to get away, and we can help you do that. And you can enjoy peace of mind with your purchase as all of our motorcycles are inspected by factory trained technicians.</p>
        </div>
        <div class="popularBrands--video">
            <img class="popularBrands--image" src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-banner-video.jpg" alt="">
            <div class="container">
                <div class="popularBrands--body halo-fadeInUp" data-halo-animate="1">
                    <h4 class="title">Know Your Ride Needs</h4>
                    <p class="description">What does it feel like to ride a motorcycle? If you own one, you know that fun, enjoyment, and sense of freedom it brings. From exhaust systems, tires and brakes to helmets and riding gear and everything in between, we have all motorcycle parts and accessories you may need.</p>
                    <div class="button-group">
                        <a class="button button--transparent button--videos" href="#" data-reveal-id="halo-video-popup" data-url-video="https://www.youtube.com/embed/ZeKC2myhQf8?autoplay=1&mute=1" aria-label="Watch Video"><span>Watch Video</span></a>
                        <a class="button button--primary" href="#" aria-label="View Products"><span>View Products</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popularBrands--container layout-2" data-halo-load="animation">
        <div class="popularBrands--carousel" data-halo-load="init-carousel">
            <div class="item halo-fadeInUp" data-halo-animate="1">
                <article class="popularBrands--card pos-relative">
                    <figure class="popularBrands--figure">
                        <img class="popularBrands--image"
                        src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-subvideo-1.jpg"
                        alt="Training Like Racer">
                        <img class="icon-video" 
                        src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/product_images/uploaded_images/icon-video.png" 
                        alt="Training Like Racer">
                    </figure>
                    <div class="popularBrands--body">
                        <h4 class="title">Training Like Racer</h4>
                        <div class="description">
                            <p>Come to Racecourse and try our course</p>
                        </div>
                    </div>
                    <a href="#" aria-label="Training Like Racer"></a>
                </article>
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="2">
                <article class="popularBrands--card pos-relative">
                    <figure class="popularBrands--figure">
                        <img class="popularBrands--image"
                        src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-subvideo-2.jpg"
                        alt="Touring Outfit">
                        <img class="icon-video" 
                        src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/product_images/uploaded_images/icon-video.png" 
                        alt="Touring Outfit">
                    </figure>
                    <div class="popularBrands--body">
                        <h4 class="title">Touring Outfit</h4>
                        <div class="description">
                            <p>We lead you to a new way touring outfit style</p>
                        </div>
                    </div>
                    <a href="#" aria-label="Touring Outfit"></a>
                </article>
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="3">
                <article class="popularBrands--card pos-relative">
                    <figure class="popularBrands--figure">
                        <img class="popularBrands--image"
                        src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-subvideo-3.jpg"
                        alt="Racing Experience">
                        <img class="icon-video" 
                        src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/product_images/uploaded_images/icon-video.png" 
                        alt="Racing Experience">
                    </figure>
                    <div class="popularBrands--body">
                        <h4 class="title">Racing Experience</h4>
                        <div class="description">
                            <p>Racecourse, Racer's Paradise</p>
                        </div>
                    </div>
                    <a href="#" aria-label="Racing Experience"></a>
                </article>
            </div>
        </div>
        <div class="popularBrands--content halo-fadeInUp" data-halo-animate="1">
            <p class="description-showmore" data-max-height="70px">
                The best place to buy or sell pre-owned motorcycles is the Used Motorcycle Store, with our easy buying and selling processes. Our delivery and shipping policies mean you don’t even have to leave your home to get your new bike or sell your old one! Have a bike to sell? Choose the sell or trade-in options to find out more about what we can offer for your used motorcycles! We accept sales from across the continental United States, so we can offer the best prices to our customers from further away.
                </br></br>
                The best place to buy or sell pre-owned motorcycles is the Used Motorcycle Store, with our easy buying and selling processes. Our delivery and shipping policies mean you don’t even have to leave your home to get your new bike or sell your old one! Have a bike to sell? Choose the sell or trade-in options to find out more about what we can offer for your used motorcycles! We accept sales from across the continental United States, so we can offer the best prices to our customers from further away.
                </br></br>
                The best place to buy or sell pre-owned motorcycles is the Used Motorcycle Store, with our easy buying and selling processes. Our delivery and shipping policies mean you don’t even have to leave your home to get your new bike or sell your old one! Have a bike to sell? Choose the sell or trade-in options to find out more about what we can offer for your used motorcycles! We accept sales from across the continental United States, so we can offer the best prices to our customers from further away.
            </p>
            <div class="button-group text-center">
                <a class="button button--secondary button-showmore" href="#" data-show-more-text="Read more" data-show-less-text="Read less"> 
                    <span class="text">Read more</span>
                    <svg class="icon" title="icon chevron down"><use xlink:href="#icon-chevron-down"></use></svg>
                </a>
            </div>
        </div>
    </div>
    <div id="halo-video-popup" class="modal halo-video-popup" data-reveal></div>
</div>

Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.

Please click the "Run Pen" button to be used