Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Creating a Hero with a Featured Video

Brands are increasingly using video to engage with website visitors due to higher conversion rates. This article will show you how to add a hero to your homepage with a featured video.

With the massive and growing amount of video content online, organizations are increasingly using video to engage with website visitors. Conversation rates on the use of a video in the top level of your website are much higher than say a hero with text and graphics. In this article, Solodev will show you how to add a hero to your homepage with a featured video.

Below is the HTML, CSS, and JavaScript required.

Step 1 - featured-video.html

Copy and paste the HTML below into your web page

<div class="hero-content">
   <div class="row">
      <div class="col-md-6">
         <div class="well">
            <h2>Reach the right customers.</h2>
            <p>With advanced targeting by MicoCorp, you can reach the right customer at the right place at the right time. Jumpstart your marketing efforts today with MicroCorp!</p>
            <br>
            <button class="btn btn-success center-block" target="_blank">
            Launch Now!
            </button>
         </div>
      </div>
      <div class="col-md-6">
         <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9R0GT5Dyihk"></iframe>
         </div>
      </div>
   </div>
</div>

Step 2 - featured-video.css

Download the CSS below and include it in your web page

featured-video.css

Step 3 - Add the includes below to your web page

<link rel="stylesheet" href="featured-video.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In this article, Solodev showed how to create a hero with a featured video for display on your website's homepage. As stated in the introduction, the use of this type of hero will increase conversions and as a result, sales. Now swap out the video and copy and make it your own!

Download from Github

Share on Facebook Tweet It