How to Embed a YouTube Video in Lightbox

Lightbox has become a popular effect for showing any type of media in overlay. It allows you to pop up your content in overlay from a trigger element without directly embedding it on 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.

Now install the plugin on your site like any other WordPress plugin.

Once you have installed the plugin, create a new post/page and place 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 on your post/page (just like copying the video code from YouTube and pasting it here). 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 allow you to change the behaviour of the YouTube video player. Lets 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 parameters 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 parameters 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 in 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.

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

YouTube video popup from text

[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 popup from image

[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 store page here