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: 

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.

Author

Scott Madara
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.