How to Display YouTube Video in Lightbox

//How to Display YouTube Video in Lightbox

How to Display YouTube Video in Lightbox

In this short tutorial, I am going to show you an easy way that you can display YouTube or Vimeo video in Lightbox.

Most of us know that YouTube is the most popular platform that we can utilize to generate traffic to a website, but it is also a very good place that you can use to host videos, and then embed them on your website.

How to Display YouTube Video in LightboxHowever, many people are not sure how to setup, so that YouTubue or Vimeo can be display in Lightbox. In the following tutorial, I am going to share with you an step by step guide on how you can accomplish that.

Step 1:

Login to wp-admin or dashboard, and then go to Plugins -> add new, search for “WP Video Lightbox” that is  By Tips and Tricks HQ, Ruhul Amin, and then click the Install Now button, after that is done, you can go ahead, and click the Activate button.

Step 2:

YouTube Video Implementation:

Go to your YouTube video, and then copy the ID codes. For example, if your YouTube video has the link of youtube.com/watch?v=YTevcWudUDk,  YTevcWudUDk will be your YouTube video ID codes. After you have that, you can simply implement is with the following shortcodes:

[video_lightbox_youtube video_id="YTevcWudUDk" width="640" height="480" anchor="click here to open Video"]

You can adjust width number and height number to whatever numbers to fit your requirements.

As you can tell, the above shortcode is interpreted so that when people are clicking on “click here to open YouTube video”, and the lightbox video will be displayed. However, what if, you want to display an image, so that when people are clicking on the image, and the lightbox video will be displayed.

To to do that, you just need some adjustments to the shortcode:

[video_lightbox_youtube video_id="YTevcWudUDk" width="640" height="480" anchor="http://www.siteber.com/images/youtube-thumb.jpg"]

So instead of text, you can simply replace it with image url.

Vimeo Video Implementation:

Similarly, if you want to use lightbox on a Vimeo video, the first thing you need to do is find out the video ID, which should just be numbers if you look at your Vimeo url. For example, you have Vimeo of vimeo.com/97360486, 97360486 will be the video ID number.

For the text display, you can use the following shortcode:

[video_lightbox_vimeo5 video_id="13562192" width="640" height="480" anchor="click here to open Video"]

For the image display, you can use the following shortcode:

[video_lightbox_vimeo5 video_id="13562192" width="640" height="480" anchor="https://siteber.com/images/vimeo-thumb.jpg"]

As you can see, it is quite easy to implement a video lightbox in WordPress. Hopefully, this short tutorial is clear for anyone who is having trouble to setup a video lightbox on his or her WordPress site. As always, if you have any question, feel free to leave a comment below, or if you have a better solution, please let me know.

Related:  How to Add Drop Caps in WordPress Posts and Pages
2018-03-01T02:40:08+00:00By |Categories: WordPress Tutorial for Beginners|Tags: , , , |

About the Author:

Founder of Siteber: a full-stack web developer with more than 8 years working experience in WordPress, SEO, and internet marketing.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.