Create a Lightbox in WordPress

What is a lightbox in Word press? And how to create one.

Light to dark: A lightbox is a dark pop up window that overlays your web site to showcase an image, product or in this case, a video. It serves to focus the users attention only on this item.

You can have the dark area totally black, or semitransparent with the web site still slightly visible behind it. I prefer semi transparent. It’s reassuring to still see the website there behind the lightbox. The user knows they haven’t totally left the site.

How to make a lightbox:

In this video example I adapt an icon in word press to work as a button (very simple).This button launches a light box that displays a video.

Why bother?

A lightbox is a focused, quiet space for a specific presentation. A step outside from the rest of the web site. It can be used for showcasing collections and portfolios.

Here I’ve used the lightbox to launch a video. This video is hosted on the site (not embedded), and in web terms it’s big in weight (11MB).

A file weighing that much will really drag down your website page loading speed, unless you use it as I have here, in a lightbox. Because when using a lightbox the video is not hosted on the web page, it’s hosted in the lightbox. So the weight of the video is a button click away from the web page. Therefore it doesn’t affect the web page load time.

SEO: 

How quickly your web site page loads is one of the most important factors for SEO (Search Engine Optimization). How good your SEO is determines how Google regards your site. You want Google to approve your site so that you appear in Google searches. More traffic, more business for you. A web page that loads slowly due to a large video file will rank poorly in SEO term and no one will find your site.

I hope this was useful? Any questions contact us!