How to Add Video Lightbox in WordPress

If you are looking for a better way to display your videos on your WordPress site or are trying to get a better understanding on how lightboxes work, this article is for you.

A lightbox can be a great tool for showcasing both photos and videos on your website or blog. It makes the media truly stand out and captivate the visitor’s attention. It also adds a nice design element to your site, which is both professional and artistic at the same time.

What is a Lightbox?

A popular JavaScript technique, a lightbox uses modal dialogs to display various types of content. When a lightbox-enabled video, photo or link is clicked, the content it’s linked to is typically zoomed in on and displayed in an overlay box, while the rest of the Web page gets darkened and disabled. This way the viewer can focus solely on the lightbox content without getting distracted by other elements of the site.

Why Use a Lightbox?

The lightbox adds an elegant, classy feature to any website. On top of that, it is very easy for developers and webmasters to implement. Many WordPress themes come with the lightbox feature built in these days. In case the feature is missing from your theme, you can easily add the lightbox functionality to your site by choosing one of many available plugins. Your site visitors will also appreciate this clean design element and the ability to view your media content without any distractions. It can be particularly valuable for photography sites, wedding blogs, video hosting sites, online stores and other sites that want to put a lot of emphasis on the visual content.

Lightbox Solution for WordPress

The WordPress Lightbox Ultimate plugin is a great choice for those webmasters who are looking to add the lightbox function to their sites. Similarly to the free WordPress Video Lightbox plugin, it allows you to use the lightbox overlay effect to embed videos in your posts or pages. However, the premium WordPress Lightbox Ultimate plugin comes with a number of other user-requested features that the free version doesn’t have, such as additional customization options and a larger amount of supported video formats.

Features

The lightbox ultimate plugin allows you to embed videos anywhere on your site, present them in a professional way, and manage your site’s real estate more efficiently by saving the amount of space your videos occupy. Here are some other great features the plugin has to offer.

  • You can use anchor text or a clickable image to make the video pop up in a light box.
  • Shortcodes are available for embedding responsive videos, meaning that your videos will display equally well no matter what device or screen size they are viewed on.
  • The lightbox videos are compatible with all browser types, which means that your site visitors will have no problem viewing them in Firefox, Chrome, IE, Opera and other browsers, including iOS devices.
  • Besides the standard MP4 videos, you can use the lightbox for other video types, such as YouTube, Vimeo and Viddler videos. You can also display Web pages, images and galleries in the lightbox format, and different file types like MP3, PDF, FLV and Flash.
  • The lightbox feature can be used for Amazon S3 videos, which is important because they are protected videos from Amazon. This means that you can sell videos and offer a secure S3 download link on your site.
  • The plugin supports RTMP video streaming using Amazon CloudFront and S3. RTMP, which stands for Real Time Messaging Protocol, allows for smooth streaming and transmission of your videos by splitting streams into fragments, the size of which is dynamically negotiated between the user and the server. CloudFront is a content delivery network that serves static, dynamic and streaming content from servers close to the geo-location of the visitor.

Installation

Install the WordPress Lightbox Ultimate plugin like you would any other:

  1. Click Add New in the Plugins menu of your dashboard.
  2. Select the Upload tab and browse to your device to find the wp-lightbox-ultimate.zip file, which you would have received after buying the plugin.
  3. Click Install Now and then Activate Plugin.

Settings Overview

To access the plugin’s settings, select the WP Lightbox item in the Settings menu of your dashboard.

In the General Settings tab, you can adjust the width and the height of the lightbox. You can also enable jQuery, and enable MP4 and Amazon S3 video display here, among other options.

The Library Settings tab lets you adjust such configurations as theme and opacity of the box, animation speed of the popup window and autoplay option, to name a few.

Using the WP Lightbox Ultimate Plugin to Embed a YouTube Video

To access the list of shortcodes the plugin uses, click the Plugin Usage Area link in the General Settings. If you would like to embed a video from YouTube on your site and display it in a lightbox, there are a couple of ways you can do it. The plugin makes it possible to either post the video with anchor text or with anchor image.

For the anchor text, use the following shortcode:

[wp_lightbox_ultimate_youtube_video_embed videoid="XXyXrHRQuBc" width="500" height="400" autoplay="0" display_control="1" fullscreen="1" autohide="2" theme="dark" use_https="" enable_privacy="" show_logo="1" showinfo="1" auto_popup="" direct_embed="" anchor_type="text" text="Click here to open the YouTube video" source=""]

To display the video with an anchor image, which is usually the screenshot of the video, use the following shortcode:

[wp_lightbox_ultimate_youtube_video_embed videoid="XXyXrHRQuBc" width="500" height="400" autoplay="0" display_control="1" fullscreen="1" autohide="2" theme="dark" use_https="" enable_privacy="" show_logo="1" showinfo="1" auto_popup="" direct_embed="" anchor_type="image" text=""source="http://www.example.com/images/youtube-video.jpg"]

Here’s an explanation of the parameters inside these shortcodes.

Videoid is the unique YouTube ID of the video you want to embed, which is usually displayed after the “=” sign in YouTube links. For example, in the link https://www.youtube.com/watch?v=XXyXrHRQuBc, videoid is “XXyXrHRQuBc.”

The width and height parameters indicate the dimensions of the video you want to display. You can keep these parameters empty if you have already indicated the width and the height in the General Settings of the plugin and want these parameters to apply to the given video.

Autoplay can be set to “1” if you want the video to play automatically as soon as it’s loaded or “0” if you want to disable autoplay.

Display_control can be set to “1” if you want the visitors to see player controls and to “0” if you don’t want the controls to display.

Fullscreen can be set to “1” to enable a fullscreen button and to “0” to disable it.

The autohide parameter determines whether the controls and the progress bar of the video will remain visible or disappear during the viewing. The value of “2” indicates that the progress bar will fade out when the video is viewed, but the controls will stay visible. The value of “0” will keep the controls and the progress bar visible throughout the viewing. The value of “1” will make the progress bar and the controls fade out. They will reappear once the user moves the cursor over the player.

The theme parameter can be set to either “dark” or “light” and indicates the color of the controls.

The use_https parameter can be enabled if you are embedding a YouTube video on a site that uses HTTPS. This will prevent such a site from generating a warning about “mixed content,” which indicates that some parts of the page are secure and others are not. HTTPS is the secure version of HTTP. It adds an encryption later to any information transmitted between the server and the computer. Set this parameter to “1” if you are using HTTPS and want to prevent the “mixed content” warning from displaying.

Setting the enable_privacy parameter to “1” will restrict YouTube’s ability to collect cookies from users who view the video through your site. The parameter can be kept empty if you don’t need to use this feature.

The show_logo parameter can be set to “0” to ensure that your player does not show the YouTube logo with the embedded video. Its default setting is “1.”

The showinfo parameter can be set to “0” if you don’t want to display information like the video title and the name of the uploader. It is set to “1” by default.

The auto_popup parameter can be used to have the video automatically pop up as soon as the page loads. To achieve this, set it to “1.” You can leave it empty if you don’t need this feature.

Direct_embed will let you embed a YouTube video directly, instead using a lightbox with anchor image or text. Change this parameter’s value to “1” to achieve this, or leave it empty if you want to skip this option.

Anchor_type can be set to either “text” or “image,” depending on what anchor you would like to use.

In the text parameter, you can indicate what message you want to display as a link to the video lightbox. This option is available if you set your anchor to “text.”

The source parameter can be used if you chose “image” as your anchor type. It will let you specify the URL of the image you want to use as a link to the video lightbox.

Note that a lot of these parameters will not apply to iOS devices, since they use their own player instead of a YouTube player to show videos.

Leave a Reply

Your email address will not be published. Required fields are marked *