How to Add Pop Up Video into a Website

Excellent content is important but sometimes words on a page aren't as impactful as imagery. Pop up video elements can do wonders for both giving your website a human voice while also showcasing a more visually engaging element to your website.

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: 


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


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


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.


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

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev

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