How to Add Pop Up Video into a Website

Video remains one of the most popular forms of content marketing around -- and it's certainly one of the most beneficial for a website.

Here are some of the key benefits to adding video to your website: 

- Increased engagement. By the very nature of video, it invites engagement. Study after study have shown that people are more likely to watch a video about a topic rather than read a blog about the same topic. People simply love visual elements -- especially if those elements move and capture a viewer's attention. 

- Excellent ROI. Video content elements aren't always a priority for content marketing teams, but organizations that use them swear they're worth it. Over 83% of businesses report that their investment in video elements are worth it.

- Improved SEO. This goes back to our first point. Videos naturally increase time people spend on your website. Longer exposure builds trust with your website -- and not just for the human viewers engaging with your content. Longer times and lower bounce rates tell Google that your site probably has viable, relevant content to certain queries. Some studies have indicated that websites are 53% more likely to show up on page one results if they have embedded videos.

- Boosted conversions. Studies have shown that putting a video on a landing page can improve conversions by nearly 80%. 

Here's how to create a pop up video element utilizing Magnific Popup as a responsive lightbox: 

HTML

The HTML uses just some default bootstrap classes, including the boostrap responsive embed classes:

CSS

We only need some CSS to control how the embed and popup overlay interact:

JS

Some simple Javascript that initializes Magnific Popup on click:

Want to see how it all looks before committing to its use? Check out the JSFiddle below.