Scribd
Upload
13 views

WP Video Lightbox Plugin Usage Guide: 1. Using Wordpress Shortcodes

The document provides instructions for using the WP Video Lightbox Plugin to embed different types of media content in WordPress posts and pages using either shortcodes or HTML. It describes how to embed videos from YouTube and Vimeo using shortcodes by including the video ID, width, height, and anchor text. It also explains how to embed images, Flash content, YouTube and Vimeo videos, iframes, and inline content using HTML by linking to the media with the "rel" attribute set to "wp-video-lightbox".

Uploaded by

Rencito14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

WP Video Lightbox Plugin Usage Guide: 1. Using Wordpress Shortcodes

The document provides instructions for using the WP Video Lightbox Plugin to embed different types of media content in WordPress posts and pages using either shortcodes or HTML. It describes how to embed videos from YouTube and Vimeo using shortcodes by including the video ID, width, height, and anchor text. It also explains how to embed images, Flash content, YouTube and Vimeo videos, iframes, and inline content using HTML by linking to the media with the "rel" attribute set to "wp-video-lightbox".

Uploaded by

Rencito14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

WP Video Lightbox Plugin Usage Guide

1. Using WordPress ShortCodes


To use a shortcode to embed a video on a WordPress post or page you need a few key
pieces of information. These are:
a) Video ID: Every video hosted on Vimeo or YouTube has a unique Video ID. One of
the easiest way to find the video id is from the URL of the video. For example the video
id for the following YouTube Video is G7z74BvLWUg

The video id for the following Vimeo video is 13562192

b) Width: The width of the video.


c) Height: The height of the video.
d) Anchor: Anchor is the text or image that your visitor can click which will pop over
the embedded video in a lightbox overlay.
Embedding Vimeo Video
You can embed a vimeo video using the following shortcode in a WordPress post or
page:
[video_lightbox_vimeo5 video_id=XX width=640 height=480 anchor=YY]
Replace XX with the actual video id and YY with the Anchor Text. You can use an
image as your anchor too.
Embedding YouTube Video
You can embed a vimeo video using the following shortcode in a WordPress post or
page:
[video_lightbox_youtube video_id=XX width=640 height=480 anchor=YY]
Replace XX with the actual video id and YY with the Anchor Text. You can use an
image as your anchor too.

2. Using HTML
Embedding an Image
To open an image using lightbox overly do the following:
1. Create a link (<a href=#>).
2. Add the rel attribute wp-video-lightbox to it (rel=wp-video-lightbox).
3. Change the href of your link so it points to the full size image.
You can also add a title and a description to your picture:
1. To display a title, add the title into the ALT attribute or your thumbnail image.
2. To display a description, add the description into the TITLE attribute or your link.
Example Code
<a href="images/fullscreen/2.jpg" rel="wp-video-lightbox"
title="This is the description"><img src="
http://example.com/images/thumbnails/t_2.jpg" width="60"
height="60" alt="This is the title" /></a>

Embedding Flash
To open flash content simply:
1. Create a link (<a href=#>).
2. Add the rel attribute wp-video-lightbox to it (rel=wp-video-lightbox).
3. Change the href of your link so it points to the SWF file.
4. Then add the width and height as parameters in your HREF
(?width=100&height=100).
5. In the case your flash needs specifics variables, add &flashvars and add the
required parameters.
Example Code
<a
href="http://www.adobe.com/products/flashplayer/include/mar
quee/design.swf&?width=792&amp;height=294" rel="wp-videolightbox[flash]" title="Flash 10 demo"><img src="
http://example.com/images/thumbnails/flash-logo.jpg"
alt="Flash 10 demo" width="60" /></a>

Embedding YouTube Video


To open YouTube content:

1. Create a link (<a href=#>).


2. Add the rel attribute wp-video-lightbox to it (rel=wp-video-lightbox).
3. Change the href of your link so it points to the YouTube video page, the same link
you would share with friends.
Example Code
<a href="http://www.youtube.com/watch?v=G7z74BvLWUg"
rel="wp-video-lightbox" title=""><img
src="http://example.com/images/thumbnails/youtube.jpg"
alt="YouTube" width="60" /></a>
Embedding Vimeo Video
To open Vimeo video:
1. Create a link (<a href=#>).
2. Add the rel attribute wp-video-lightbox to it (rel=wp-video-lightbox).
3. Change the href of your link so it points to the Vimeo video page, the same link
you would share with friends.
Example Code
<a href="http://vimeo.com/13422697?width=640&amp;height=480
" rel="wp-video-lightbox" title=""><img src="
http://example.com/images/thumbnails/flash-logo.jpg"
alt="YouTube" width="60" /></a>

Using iFrame
To open your content inside an iframe:
1. Create a link (<a href=#>).
2. Add the rel attribute wp-video-lightbox to it (rel=wp-video-lightbox).
3. Change the href of your link so it points to the webpage you want to open.
4. Then add ?iframe=true as a parameters in your HREF so wp-video-lightbox
knows to open the content in an iframe.
5. Then add the width and height as parameters in your HREF
(&width=100&height=100). Please note that the dimensions can be percent based.
Example Code
<a
href="http://www.apple.com?iframe=true&width=500&height=300
" rel="wp-video-lightbox[iframes]">Apple.com</a>

Inline Content
To open inline content:
1. Create a link (<a href=#>).
2. Add the rel attribute wp-video-lightbox to it (rel=wp-video-lightbox).
3. Change the href of your link so it is the ID of the inline content you want to open
with the ID CSS selector (#).
<a href="#inline-1" rel="wp-video-lightbox" ><img src="
http://example.com/wpcontent/themes/NMFE/images/thumbnails/ logo.jpg" alt=""
width="50" /></a>
<div id="inline-1" style="display:none;">
<p>This is inline content opened in wp-video-lightbox.</p>
</div>

You might also like