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.

Creating a Hero 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


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

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!

Author

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.