Below, you’ll find a detailed guide on how to add the WP Video Lightbox Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WP Video Lightbox Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the WP Video Lightbox Plugin and the shortcodes it provides:
"WP Video Lightbox is a user-friendly WordPress plugin designed to display videos on any page or post. It helps to create an engaging and interactive viewing experience for your audience."
- [video_lightbox_vimeo5]
- [video_lightbox_youtube]
- [video_lightbox_fb_vimeo]
- [video_lightbox_fb_youtube]
WP Video Lightbox [video_lightbox_vimeo5] Shortcode
The wp-video-lightbox plugin shortcode is used to embed Vimeo videos on a WordPress site. It allows customization of video parameters like width, height, and description. It checks for essential parameters (Video ID, Width, Height, Anchor), and if missing, it returns an error message. The ‘auto_thumb’ option enables automatic thumbnail generation. The shortcode creates a unique URL for the video, and with JavaScript, it adjusts the video’s dimensions according to the window size. In conclusion, this shortcode is a powerful tool for embedding responsive Vimeo videos in WordPress.
Shortcode: [video_lightbox_vimeo5]
Parameters
Here is a list of all possible video_lightbox_vimeo5 shortcode parameters and attributes:
video_id– The unique ID of the Vimeo video.p_hash– Optional parameter for private Vimeo videos.width– The width of the video player.height– The height of the video player.description– Optional text to display as video description.anchor– The clickable text or image to open video.alt– Alternative text for the anchor image.auto_thumb– Option to automatically generate video thumbnail.
Examples and Usage
Basic example – Display a Vimeo video using the video’s ID, with specified width and height
[video_lightbox_vimeo5 video_id="123456" width="500" height="300" /]Advanced examples
Display a Vimeo video with an image as the anchor. The image will be used as the thumbnail for the video. The video will play in a lightbox when the image is clicked.
[video_lightbox_vimeo5 video_id="123456" width="500" height="300" anchor="http://example.com/image.jpg" /]Display a Vimeo video with auto-generated thumbnail as the anchor. The video will play in a lightbox when the thumbnail is clicked.
[video_lightbox_vimeo5 video_id="123456" width="500" height="300" auto_thumb="1" /]Display a Vimeo video with a text as the anchor. The video will play in a lightbox when the text is clicked.
[video_lightbox_vimeo5 video_id="123456" width="500" height="300" anchor="Click here to watch the video" /]Display a Vimeo video with a description. The description will be shown in the lightbox.
[video_lightbox_vimeo5 video_id="123456" width="500" height="300" description="This is a description of the video." /]Display a Vimeo video with a private link. The p_hash parameter is used for private Vimeo videos.
[video_lightbox_vimeo5 video_id="123456" width="500" height="300" p_hash="abcd1234" /]PHP Function Code
In case you have difficulties debugging what causing issues with [video_lightbox_vimeo5] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('video_lightbox_vimeo5', 'wp_vid_lightbox_vimeo5_handler');Shortcode PHP function:
function wp_vid_lightbox_vimeo5_handler($atts)
{
$atts = shortcode_atts(array(
'video_id' => '',
'p_hash' => '',
'width' => '',
'height' => '',
'description' => '',
'anchor' => '',
'alt' => '',
'auto_thumb' => '',
), $atts);
$atts = array_map('sanitize_text_field', $atts);
extract($atts);
if(empty($video_id) || empty($width) || empty($height)){
return '<p>'.__('Error! You must specify a value for the Video ID, Width, Height and Anchor parameters to use this shortcode!', 'wp-video-lightbox').'</p>';
}
if(empty($auto_thumb) && empty($anchor)){
return '<p>'.__('Error! You must specify an anchor parameter if you are not using the auto_thumb option.', 'wp-video-lightbox').'</p>';
}
$atts['vid_type'] = "vimeo";
if (preg_match("/http/", $anchor)){ // Use the image as the anchor
$anchor_replacement = '<img src="'.esc_url($anchor).'" class="video_lightbox_anchor_image" alt="'.wp_vid_lightbox_sanitize_alt_text($alt).'" />';
}
else if($auto_thumb == "1")
{
$anchor_replacement = wp_vid_lightbox_get_auto_thumb($atts);
}
else {
$anchor_replacement = esc_html($anchor);
}
$href_content = 'https://vimeo.com/'.$video_id;
if(!empty($p_hash)){
$href_content = add_query_arg( array(
'p_hash' => $p_hash
), $href_content);
}
$href_content = add_query_arg( array(
'width' => $width,
'height' => $height
), $href_content);
$id = uniqid();
$aspect_ratio = (float)$height / (float)$width;
$esc_js = 'esc_js';
$output = "";
$output .= '<a id="'.$id.'" rel="'.WPVL_PRETTYPHOTO_REL.'" href="'.esc_url($href_content).'" title="'.wp_vid_lightbox_sanitize_text($description).'">'.$anchor_replacement.'</a>';
$output .= <<<EOT
<script>
/* <![CDATA[ */
jQuery(document).ready(function($){
$(function(){
var width = $(window).innerWidth();
var setwidth = parseFloat($width);
var ratio = parseFloat($aspect_ratio);
var height = parseFloat($height);
var link = '{$esc_js($href_content)}';
if(width < setwidth)
{
height = Math.floor(width * $aspect_ratio);
//console.log("device width "+width+", set width "+$width+", ratio "+$aspect_ratio+", new height "+ height);
var new_url = wpvl_paramReplace('width', link, width);
var new_url = wpvl_paramReplace('height', new_url, height);
$("a#$id").attr('href', new_url);
//console.log(new_url);
}
});
});
/* ]]> */
</script>
EOT;
return $output;
}
Code file location:
wp-video-lightbox/wp-video-lightbox/misc_functions.phpWP Video Lightbox [video_lightbox_youtube] Shortcode
The WP Video Lightbox plugin shortcode, ‘video_lightbox_youtube’, allows you to embed YouTube videos in a lightbox overlay display. This shortcode requires video ID, width, and height parameters. This shortcode also supports optional parameters such as ‘description’, ‘anchor’, ‘alt’, and ‘auto_thumb’. It generates a unique URL for each video and adjusts the video size based on the device’s screen width.
Shortcode: [video_lightbox_youtube]
Parameters
Here is a list of all possible video_lightbox_youtube shortcode parameters and attributes:
video_id– Identifier of the YouTube video to display.width– Defines the width of the video player.height– Specifies the height of the video player.description– Text description to display with the video.anchor– Defines the clickable element to open the video.alt– Alternative text for the anchor when the image is not available.auto_thumb– Determines if the video’s thumbnail is used as the anchor.
Examples and Usage
Basic example – A simple usage of the shortcode to display a YouTube video with a specified width and height. The video ID, width, and height parameters are required.
[video_lightbox_youtube video_id="dQw4w9WgXcQ" width="500" height="300" /]Advanced examples
Using the shortcode to display a YouTube video with a specified width, height, and description. The video will display with an auto-generated thumbnail.
[video_lightbox_youtube video_id="dQw4w9WgXcQ" width="500" height="300" description="This is a YouTube video" auto_thumb="1" /]Using the shortcode to display a YouTube video with a specified width, height, description, and custom anchor. The video will display with the custom anchor text instead of a thumbnail.
[video_lightbox_youtube video_id="dQw4w9WgXcQ" width="500" height="300" description="This is a YouTube video" anchor="Click here to watch" /]Using the shortcode to display a YouTube video with a specified width, height, description, and custom alt text. The video will display with an auto-generated thumbnail and the custom alt text will be used for the thumbnail image.
[video_lightbox_youtube video_id="dQw4w9WgXcQ" width="500" height="300" description="This is a YouTube video" auto_thumb="1" alt="Custom alt text" /]PHP Function Code
In case you have difficulties debugging what causing issues with [video_lightbox_youtube] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('video_lightbox_youtube', 'wp_vid_lightbox_youtube_handler');Shortcode PHP function:
function wp_vid_lightbox_youtube_handler($atts)
{
$atts = shortcode_atts(array(
'video_id' => '',
'width' => '',
'height' => '',
'description' => '',
'anchor' => '',
'alt' => '',
'auto_thumb' => '',
), $atts);
$atts = array_map('sanitize_text_field', $atts);
extract($atts);
if(empty($video_id) || empty($width) || empty($height)){
return '<p>'.__('Error! You must specify a value for the Video ID, Width, Height parameters to use this shortcode!', 'wp-video-lightbox').'</p>';
}
if(empty($auto_thumb) && empty($anchor)){
return '<p>'.__('Error! You must specify an anchor parameter if you are not using the auto_thumb option.', 'wp-video-lightbox').'</p>';
}
$atts['vid_type'] = "youtube";
if(preg_match("/http/", $anchor)){ // Use the image as the anchor
$anchor_replacement = '<img src="'.esc_url($anchor).'" class="video_lightbox_anchor_image" alt="'.wp_vid_lightbox_sanitize_alt_text($alt).'" />';
}
else if($auto_thumb == "1")
{
$anchor_replacement = wp_vid_lightbox_get_auto_thumb($atts);
}
else{
$anchor_replacement = esc_html($anchor);
}
$href_content = 'https://www.youtube.com/watch?v='.$video_id.'&width='.$width.'&height='.$height;
$id = uniqid();
$aspect_ratio = (float)$height / (float)$width;
$esc_js = 'esc_js';
$output = '<a id="'.$id.'" rel="'.WPVL_PRETTYPHOTO_REL.'" href="'.esc_url($href_content).'" title="'.wp_vid_lightbox_sanitize_text($description).'">'.$anchor_replacement.'</a>';
$output .= <<<EOT
<script>
/* <![CDATA[ */
jQuery(document).ready(function($){
$(function(){
var width = $(window).innerWidth();
var setwidth = parseFloat($width);
var ratio = parseFloat($aspect_ratio);
var height = parseFloat($height);
var link = '{$esc_js($href_content)}';
if(width < setwidth)
{
height = Math.floor(width * $aspect_ratio);
//console.log("device width "+width+", set width "+$width+", ratio "+$aspect_ratio+", new height "+ height);
var new_url = wpvl_paramReplace('width', link, width);
var new_url = wpvl_paramReplace('height', new_url, height);
$("a#$id").attr('href', new_url);
//console.log(new_url);
}
});
});
/* ]]> */
</script>
EOT;
return $output;
}
Code file location:
wp-video-lightbox/wp-video-lightbox/misc_functions.phpWP Video Lightbox [video_lightbox_fb_vimeo] Shortcode
The ‘video_lightbox_fb_vimeo’ shortcode from the wp-video-lightbox plugin is designed to embed Vimeo videos in a lightbox overlay on your WordPress site. This shortcode accepts parameters like ‘video_id’, ‘width’, ‘height’, ‘caption’, ‘anchor’, ‘alt’, and ‘auto_thumb’. It checks if the fancyBox library is enabled and if necessary values are specified. If all conditions are met, it generates a unique id and produces an output that includes the video link and the anchor image or text. If the ‘auto_thumb’ option is used, it automatically fetches the video thumbnail.
Shortcode: [video_lightbox_fb_vimeo]
Parameters
Here is a list of all possible video_lightbox_fb_vimeo shortcode parameters and attributes:
video_id– The unique identifier of the Vimeo video.width– The desired width of the video player.height– The desired height of the video player.caption– The text displayed underneath the video.anchor– The clickable text or URL that triggers the lightbox.alt– The alternative text for the anchor image.auto_thumb– If set to “1”, the anchor will be replaced with the video thumbnail.
Examples and Usage
Basic example – A simple usage of the shortcode to embed a Vimeo video with a specific video ID, width, and height.
[video_lightbox_fb_vimeo video_id="123456789" width="500" height="300"]Advanced examples
Embedding a Vimeo video with a specific video ID, width, height, and custom caption. The caption will appear when the video lightbox is opened.
[video_lightbox_fb_vimeo video_id="123456789" width="500" height="300" caption="This is a custom caption"]Embedding a Vimeo video with a specific video ID, width, height, and using an image as an anchor. When the image is clicked, the video lightbox will open.
[video_lightbox_fb_vimeo video_id="123456789" width="500" height="300" anchor="http://example.com/path/to/image.jpg"]Embedding a Vimeo video with a specific video ID, width, height, and auto generating the thumbnail. The thumbnail will serve as the anchor for the video lightbox.
[video_lightbox_fb_vimeo video_id="123456789" width="500" height="300" auto_thumb="1"]PHP Function Code
In case you have difficulties debugging what causing issues with [video_lightbox_fb_vimeo] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('video_lightbox_fb_vimeo', 'wp_vid_lightbox_fb_vimeo_handler');Shortcode PHP function:
function wp_vid_lightbox_fb_vimeo_handler($atts)
{
$atts = shortcode_atts(array(
'video_id' => '',
'width' => '',
'height' => '',
'caption' => '',
'anchor' => '',
'alt' => '',
'auto_thumb' => '',
), $atts);
$atts = array_map('sanitize_text_field', $atts);
extract($atts);
$enable_fancyBox = get_option('wpvl_enable_fancyBox');
if(!isset($enable_fancyBox) || empty($enable_fancyBox)){
return '<p>'.__('Error! You need to enable the fancyBox library in the settings!', 'wp-video-lightbox').'</p>';
}
if(empty($video_id) || empty($width) || empty($height)){
return '<p>'.__('Error! You must specify a value for the Video ID, Width, Height and Anchor parameters to use this shortcode!', 'wp-video-lightbox').'</p>';
}
if(empty($auto_thumb) && empty($anchor)){
return '<p>'.__('Error! You must specify an anchor parameter if you are not using the auto_thumb option.', 'wp-video-lightbox').'</p>';
}
$atts['vid_type'] = "vimeo";
if (preg_match("/http/", $anchor)){ // Use the image as the anchor
$anchor_replacement = '<img src="'.esc_url($anchor).'" class="video_lightbox_anchor_image" alt="'.wp_vid_lightbox_sanitize_alt_text($alt).'" />';
}
else if($auto_thumb == "1")
{
$anchor_replacement = wp_vid_lightbox_get_auto_thumb($atts);
}
else {
$anchor_replacement = esc_html($anchor);
}
$args = array();
$id = uniqid();
$args['id'] = $id;
$args['width'] = $width;
$args['height'] = $height;
$href_content = 'https://vimeo.com/'.$video_id;
$output = "";
$output .= '<a href="'.esc_url($href_content).'" data-fancybox="'.$id.'" data-caption="'.esc_attr($caption).'">'.$anchor_replacement.'</a>';
$video_popup_code = wp_vid_lightbox_get_video_popup_code($args);
$output .= $video_popup_code;
return $output;
}
Code file location:
wp-video-lightbox/wp-video-lightbox/misc_functions.phpWP Video Lightbox [video_lightbox_fb_youtube] Shortcode
The WP Video Lightbox plugin shortcode ‘video_lightbox_fb_youtube’ is designed to embed YouTube videos in a lightbox overlay. It accepts parameters like video ID, width, height, caption, anchor, alt, and auto_thumb. If the fancyBox library is disabled or necessary parameters are missing, errors are returned. The shortcode generates a unique ID and creates an anchor element with the video URL. If an HTTP anchor is provided, it’s used as the image anchor; otherwise, it uses the auto_thumb option or the anchor text. The output includes the video popup code.
Shortcode: [video_lightbox_fb_youtube]
Parameters
Here is a list of all possible video_lightbox_fb_youtube shortcode parameters and attributes:
video_id– The unique identifier of the YouTube video.width– The width of the video player on the page.height– The height of the video player on the page.caption– The text that will appear underneath the video.anchor– The hyperlink anchor text or image URL.alt– The alternative text for the anchor image.auto_thumb– A toggle to automatically generate a thumbnail.
Examples and Usage
Basic Example – A simple usage of the ‘video_lightbox_fb_youtube’ shortcode to embed a YouTube video with a specific ID, width, and height.
[video_lightbox_fb_youtube video_id="dQw4w9WgXcQ" width="640" height="480" /]Advanced Examples
Embedding a YouTube video with a specific ID, width, height, and a custom caption.
[video_lightbox_fb_youtube video_id="dQw4w9WgXcQ" width="640" height="480" caption="Rick Astley - Never Gonna Give You Up" /]Embedding a YouTube video with a specific ID, width, height, and a custom anchor.
[video_lightbox_fb_youtube video_id="dQw4w9WgXcQ" width="640" height="480" anchor="Click here to watch the video" /]Embedding a YouTube video with a specific ID, width, height, and auto-generated thumbnail as the anchor.
[video_lightbox_fb_youtube video_id="dQw4w9WgXcQ" width="640" height="480" auto_thumb="1" /]Embedding a YouTube video with a specific ID, width, height, custom caption, and a custom anchor with alt text.
[video_lightbox_fb_youtube video_id="dQw4w9WgXcQ" width="640" height="480" caption="Rick Astley - Never Gonna Give You Up" anchor="https://example.com/my-custom-anchor.jpg" alt="My Custom Anchor" /]PHP Function Code
In case you have difficulties debugging what causing issues with [video_lightbox_fb_youtube] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('video_lightbox_fb_youtube', 'wp_vid_lightbox_fb_youtube_handler');Shortcode PHP function:
function wp_vid_lightbox_fb_youtube_handler($atts)
{
$atts = shortcode_atts(array(
'video_id' => '',
'width' => '',
'height' => '',
'caption' => '',
'anchor' => '',
'alt' => '',
'auto_thumb' => '',
), $atts);
$atts = array_map('sanitize_text_field', $atts);
extract($atts);
$enable_fancyBox = get_option('wpvl_enable_fancyBox');
if(!isset($enable_fancyBox) || empty($enable_fancyBox)){
return '<p>'.__('Error! You need to enable the fancyBox library in the settings!', 'wp-video-lightbox').'</p>';
}
if(empty($video_id) || empty($width) || empty($height)){
return '<p>'.__('Error! You must specify a value for the Video ID, Width, Height parameters to use this shortcode!', 'wp-video-lightbox').'</p>';
}
if(empty($auto_thumb) && empty($anchor)){
return '<p>'.__('Error! You must specify an anchor parameter if you are not using the auto_thumb option.', 'wp-video-lightbox').'</p>';
}
$atts['vid_type'] = "youtube";
if(preg_match("/http/", $anchor)){ // Use the image as the anchor
$anchor_replacement = '<img src="'.esc_url($anchor).'" class="video_lightbox_anchor_image" alt="'.wp_vid_lightbox_sanitize_alt_text($alt).'" />';
}
else if($auto_thumb == "1")
{
$anchor_replacement = wp_vid_lightbox_get_auto_thumb($atts);
}
else{
$anchor_replacement = esc_html($anchor);
}
$args = array();
$id = uniqid();
$args['id'] = $id;
$args['width'] = $width;
$args['height'] = $height;
$href_content = 'https://www.youtube.com/watch?v='.$video_id;
$output = "";
$output .= '<a href="'.esc_url($href_content).'" data-fancybox="'.$id.'" data-caption="'.esc_attr($caption).'">'.$anchor_replacement.'</a>';
$video_popup_code = wp_vid_lightbox_get_video_popup_code($args);
$output .= $video_popup_code;
return $output;
}
Code file location:
wp-video-lightbox/wp-video-lightbox/misc_functions.phpConclusion
Now that you’ve learned how to embed the WP Video Lightbox Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply