Adding a Popup Video to your Hero Image

When it comes to content, video is king. It is the most consumed content on the web. More than 500 million hours of videos are watched on YouTube each day. If you had to choose from a range of media types to get a message across, a video should always be your first consideration. Companies are taking note; over 87 percent of online marketers use video content. While graphics and copy can make the difference between a website visit and a sale, video can go even further. Marketers who use video can see revenue growth 49 percent faster than non-video using competition. Why not have the best of both worlds?

Simply making your hero a video or designing your hero with a graphic overlayed with some copy is the typical approach to homepage hero sections. There is a way to have both, and it involves Magnific Popup -- a jQuery plugin that displays content when an HTML element is clicked. In our example, the hero image and overlaying copy is still prominent. Our Call-to-Action (CTA), however, is a button. This button does more than take them to another page with more copy and graphics; it opens a popup video. In this scenario, you can maintain your hero image and overlaying text. You also provide the option for website visitors to view a video further describing your product or service.

In this article, we'll show you how to add a video to your hero image that will popup when a button is clicked.

Below is the HTML, CSS, and JavaScript required.

Step 1 - popup-video.html

Copy and paste the code below into popup-video.html

Step 2 - popup-video.css

Download the CSS below and include it in your web page

Step 3 - popup-video.js

Copy and paste the code below into popup-video.js

Step 3 - Add the includes below to your web page

In this tutorial we showed you how to add a popup video to your hero image using the jQuery plugin Magnific Popup. Now you can customize the design and make it your own!