Creating a Hero with a Featured Video

by Matthieu McClintock

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>

Demo on JSFiddle

Download from GitHub

Originally Posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.