How to Embed a YouTube Video in Lightbox

Lightbox has become a popular effect for showing a YouTube video in a popup. It lets you pop up your video in lightbox from a trigger element without directly embedding it into a post/page. In this tutorial, I am going to show you the easiest way to embed a YouTube video in lightbox.

How to Embed a YouTube Video in Lightbox

First, you need to get the WordPress Video Lightbox plugin. You can install the plugin like any other WordPress plugin.

Create a new post/page and insert the following shortcode to embed your YouTube video:

[wp_lightbox_ultimate_youtube_video_embed videoid="IBTE-RoMsvw" width="500" height="400" hd="0" autoplay="0" display_control="1" fullscreen="1" autohide="2" theme="dark" use_https="" enable_privacy="" show_logo="1" showinfo="1" auto_popup="" direct_embed="1" anchor_type="" text="" source=""]

This will directly embed the YouTube into your post/page (just like copying and pasting the video code from YouTube). The only difference is that you can also customize the YouTube player to do various things using certain parameters.

How to Customize the YouTube Video

This shortcode has different parameters that lets you change the behavior of the YouTube video player. Let’s take a look at what each of these parameters mean:

videoid

This parameter contains the unique ID of the YouTube video you are trying to embed.

width

This parameter determines the width of the YouTube player

height

This parameter determines the height of the YouTube player

hd

This parameter allows you to load the high definition version of the YouTube video. Please note that if you choose to use this parameter, most other options may not work properly since it’s deprecated.

autoplay

This parameter allows you to automatically play the YouTube video when the page loads (for direct embed) or the video opens in lightbox. You need to set autoplay=”1″ to enable this functionality. The default option is 0 which means the video won’t automatically play.

display_control

This parameter allows you to show or hide the YouTube player controls. The default option is 1 which means the player controls will be displayed in the player. If you choose to hide the controls simple set the option to 0. This is a great option for video marketing.

fullscreen

This parameter allows you to show or hide the fullscreen option in the YouTube player. The default option is 1 which means the fullscreen option will be displayed in the player. If you choose to hide the fullscreen option from your users you can set the option to 0.

autohide

This parameter allows you to automatically hide the video progress bar and the controls when the video starts playing. The default option is 2. You can set this option to 0 to keep the progress bar and the controls visible when the video is playing. The other available option is 1 which hides your video bar as well as the controls for a couple of seconds after it starts playing.

theme

This parameter allows you to change the appearance of the player. You can either choose the “dark” theme or the “light” theme.

use_https

This parameter allows you to use the http secure version of your YouTube video.

enable_privacy

This parameter allows you to set cookies for users viewing your video. The default option is empty which means YouTube will save cookies on a user’s computer to track video statistics. To enable this option you need to set it to 1.

show_logo

This parameter allows you to show or hide the YouTube logo on the player. The default option is 1. If you don’t want to show the YouTube logo you can choose to set this option to 0. Please note that even if you disable this option a YouTube logo will still display on the upper-right corner of the YouTube player.

showinfo

This parameter allows you to show or hide some additional video information. For example: video title, video uploader.

show_annotations

This parameter allows you to show video annotations by default.

auto_popup

This parameter allows you to automatically pop up the video when the page loads (lightbox). The default option is empty.

direct_embed

This parameter allows you to directly embed a YouTube video on a post/page (not lightbox). You can keep this option empty if you choose to pop up your video in lightbox.

anchor_type

If you choose to pop up your video in lightbox (instead of direct embed), you can select the type of lightbox trigger you are going to use. It can be either a text or an image.

source

This parameter is specific to an image. If you choose anchor_type=”image”, you need to set an image URL in this parameter.

Difference Between Video Embedding

Now that you are familiar with how each parameter works you can customize the above shortcode so it works with lightbox.

There are two ways to pop up a YouTube video using this shortcode.

• Open YouTube video popup from a text link – when a user clicks on that text link your YouTube video will open in lightbox
• YouTube video lightbox from an image link – when a user clicks on that image link your YouTube video will open in lightbox

Open YouTube video from text link

[wp_lightbox_ultimate_youtube_video_embed videoid="IBTE-RoMsvw" width="500" height="400" hd="0" 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 your video" source=""]

YouTube video Lightbox from image Link

[wp_lightbox_ultimate_youtube_video_embed videoid="IBTE-RoMsvw" width="500" height="400" hd="0" 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.test.com/images/video-thumbnail.jpg"]

YouTube Video Lightbox Plugin

You can check out the plugin on the product page here