WordPress HowTo

How-to guide for WordPress

  • Home
  • Plugins
  • Themes
  • Contact
    • Privacy Policy
  • About

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
screenshot of youtube video embed 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 page here (affiliate link): https://www.tipsandtricks-hq.com/?p=3163&ap_id=naa986

Related

Written by Noor Alam · Categorized: wordpress

Comments

  1. smart media says

    Nice plugin Thank you

    Reply
  2. tempat tidur anak says

    its ok plugin very good..

    Reply
  3. samdani says

    Many of people on line do not know clearly how to embed YouTube videos in light box on the site .
    In this case this post will be very much tonic and useful . I convey thanks author a lot for sharing such nice very useful post here .

    Reply
  4. Harjit says

    I need to know if I can embed only audio from youtube for my website.

    Reply
    • admin says

      @Harjit, Unfortunately, that’s not possible at the moment.

      Reply

Leave a Reply Cancel reply

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

Search WP HowTo

Recent Posts

  • How to Add a Reply-To Address in the Gmail SMTP WordPress Plugin
  • What Does a Security Challenge Mean on PayPal?
  • WP PayPal Button Integration with Contact Form 7
  • Can People See Your Address on PayPal?
  • Mailchimp Integration for WP PayPal Plugin
  • How to Show a Text Box at WP PayPal Checkout to Collect Custom Data from Buyers
  • How to Add a Recurring Price Field to a PayPal Subscription Button
  • How to Add a Quantity Field to a PayPal Button
  • How to Configure Product Variations in WP PayPal
  • How to Make Your WooCommerce Add to Cart Buttons Bigger

Featured Add-ons

Buy Now Custom Amount for PayPal

Buy Now Discount for PayPal

Contact Form 7 Integration for PayPal

Custom Input for PayPal

Mailchimp Integration for PayPal

Product Variations for PayPal

Variable Quantity for PayPal

Variable Subscription for PayPal

Copyright © 2023 · WordPress HowTo

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAcceptRead More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT