Follow us on Twitter Follow us on Twitter

WP Content Lightbox Tutorial – Adding Youtube Videos

wp content lightbox tutorial

Hello everyone! Today we have a simple 9 step tutorial on how to add a video lightbox gallery from Youtube to your Word Press page using a pluggin called WP Video Lightbox. This tutorial is actually for one of our awesome clients, Aleph Group Inc. Their company creates amazing custom vehicles, mobile, portable and semi-permanent solutions for the medical industry, humanitarian organizations, government and law enforcement agencies.

wp content lightbox tutorial 1

1) The first step is to log into your WordPress Page and then select the Pages button on the right menu. This will take you to the section where all of the pages of your websites can be edited.

wp content lightbox tutorial 2

2) The Second Step is to find the page that has your video gallery. For this example the page is called “Our Most Recent Videos.” By clicking it you will load up the page that will allow you to edit the code for your video gallery.

wp content lightbox tutorial 3

3) The Third Step is to select the block of code from <div> to </div> and copy it. This little block of code tells the browser to load a video from Youtube with a thumbnail image in a box on your webpage.

wp content lightbox tutorial 4

4) The Fourth Step is to past the code you just copied right below the block you copied. What this does is it makes the browser load a second video right next to your first video.

wp content lightbox tutorial 5

5) The Fifth Step is simple. The code highlighted in the image above is the link to the Youtube video you want to play. In order for you to load a new video you will need to find the new video on Youtube you want to load on your webpage and then past it in that section.

wp content lightbox tutorial 6

6) The Sixth Step is to find the NEW video you want to add to your video gallery. To do this, visit your Youtube page and search for the video you want and click “SHARE” which will bring up a code that you can copy and replace on your webpage.

wp content lightbox tutorial 7

7) The Seventh Step is to go back to your WordPress Page and find snippet of code that says ‘video_id=‘ and then find the code between the quotation marks after it. Replace the code between the quotation marks with the code you copied on your Youtube page.

wp content lightbox tutorial 8

8) The 8th Step is to save your progress by clicking the Update button the right side of the page.

wp content lightbox tutorial 9

Once you click “Update” you are done! Your videos should load up right next to each other. The plugin will automatically pull a thumbnail image and short description. If you have any questions please contact us and we will be glad to help 🙂

Trackback from your site.

Austin Coulson

Web Design and Internet Marketing have been passions of Austin’s for many years. While starting out by creating websites for himself, Austin ascertained many of the fundamentals and theory that constitute professional website development. Through networking and word-of-mouth, Austin soon began building and marketing websites for many different businesses and industries.

Leave a comment